使用 CSS 模块时如何传入 props

Question

我有一个按钮组件，并使用 Tailwindcss 框架和 css 模块进行附加样式，如下所示。 这是因为我使用模板文字来引入红色背景样式。

CSS 模块：

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

反应组件：

import styles from "./style.module.css"

const Button = props => {
  return (
    <button
      className={`text-white py-2 px-4 rounded ${styles.red}`}
    >
      Button
    </button>
  )
}

但是如果我想让背景灵活并接收道具以确定背景颜色怎么办？ 我在想类似下面的事情，但显然不起作用：

<button
  className={`text-white py-2 px-4 rounded ${styles.`${props.bgColor}`}`}
>

Answer 1

事实证明，这是正确的语法：

<button
   className={`text-white py-2 px-4 rounded ${styles[props.bgColor]}`}
>