使用CSS模块时如何传递道具

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