使用 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]}`}
>