如何使用 css-modules className 的 props 变量？

Question

是否可以对 css-modules className 使用 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

分别为红色和绿色。

Answer 1

我想你错过了一个括号

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

要使用

Component

级别的 CSS，您可以像使用加载器一样将其加载到 Webpack 中（参考）

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

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

或者，您可以使用名为 classnames

的库

Answer 2

import styles from "./component.module.css";

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

我觉得这个操作效果更好

Answer 3

以下作品：

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