如何为 css-modules className 使用 props 变量？答案

【问题标题】：How to use props variable for css-modules className?如何为 css-modules className 使用 props 变量？
【发布时间】：2021-12-21 19:24:18
【问题描述】：

是否可以为 css-modules 类名使用 props 变量？

// Component.js
import styles from "./Component.module.scss"

const Component = ({ color }) => 
    <div className={`${styles.component}` `${styles.color}`>
        Component
    </div>

// Component.module.scss
.component { border: 1px black solid; }
.red { color: red; }
.green { color: green; }

然后我可以像这样使用Component：

// App.js
<Component color="red" />
<Component color="green" />

让两个Components分别为红色和绿色。

【问题讨论】：

标签： reactjs css-modules react-css-modules

【解决方案1】：

我认为你错过了一个括号

const Component = ({ color }) => {
    const cssColor = color;
    return (
        <div className={`${styles.component}` `${styles[cssColor]}`}>
            Component
        </div>
    )
}

要使用Component 级别的 CSS，您可以像使用加载器 (Reference) 一样将其加载到 webpack 中

使用 webpack 时，你可以添加加载器，也可以将模块包含到你的 webpack.config.js 中，以使 CSS 模块与 Webpack 一起使用。

test: /\.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

或者，您可以使用名为 classnames 的库

【讨论】：

【解决方案2】：

以下作品：

const Component = ({ color }) => {
    const cssColor = color;
    return (
        <div className={`${styles.component}` `${styles[cssColor]}`>
            Component
        </div>
    )
}

【讨论】：