如何在使用CSS模块时传入Props
如何在使用CSS模块时传入Props
提问于 2020-03-25 13:34:04
我有一个按钮组件，并使用Tailwindcss css框架和css模块进行额外的样式，如下所示。当我使用模板文字来拉入红色背景样式时，这是可行的。
CSS模块：
.red {
background-color: red;
}
.blue {
background-color: blue;
}React组件：
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}`}`}
>回答 1
Stack Overflow用户
发布于 2020-03-25 13:47:56
事实证明，这是正确的语法：
<button
className={`text-white py-2 px-4 rounded ${styles[props.bgColor]}`}
>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60843461
复制相关文章
相似问题
腾讯云开发者
