如何为 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>
    )
}

Answer 2

我想你错过了括号

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

的库

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

How to use props variable for css-modules className?

reactjs

css-modules

react-css-modules