How to use props variable for css-modules className?

Question

Is it possible to use a props variable for a css-modules className?

// 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; }

Then I could use the Component like so:

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

And have the two Components be red and green respectively.

Ankit Sanghvi · Accepted Answer · 2021-11-09 02:50:24Z

2

I think you've missed a bracket

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

To use Component level CSS you can get it loaded in your webpack as using a loader (Reference)

When using webpack, you can add the loader and also include the module to your webpack.config.js in other to make CSS modules work with Webpack.

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

Alternatively, you could use a library called classnames

answered Nov 9, 2021 at 2:50

Ankit Sanghvi

5271 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehdi Jeyrani · Accepted Answer · 2023-11-07 04:59:36Z

0

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

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

I think this operation works better

edited Nov 7, 2023 at 4:59

answered Nov 7, 2023 at 4:59

Mehdi Jeyrani

11 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Chris · Accepted Answer · 2021-11-09 02:44:50Z

-1

Following works:

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

answered Nov 9, 2021 at 2:44

Chris

6888 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to use props variable for css-modules className?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related