reactjs - React App with css module multiple classes

Question

i created a basic react app like this:

import React from 'react';
import style from './Button.module.scss';


export default class Button extends React.Component {
    render() {
        return (
            <button className={[style.class, 'awesome', 'great'].join(' ')}>
                hello world
            </button>
        );
    }
}

the css/scss:

.class {
    background: pink;
    color: red;


    /* not working */
    &:is(.awesome) {
        border-width: 2px;
    }

    /* not working either */
    &.awesome {
        border-width: 2px;
    }

    /* works */
    &:not(.great) {
        border-style: dotted;
    }
}

the problem: the sublass .awesome is not working, whereas .great works fine. Can you fix the code so the .awesome will work. I need some subclass of the .button, so i can toggle them at runtime.

this is the generated css on the browser, the .awesome is not generated but .great generated.

.Button_class__1tDJY:not(.Button_great__3yeAv) {
    border-style: dotted;
}
.Button_class__1tDJY {
    background: pink;
    color: red;
}

question from:https://stackoverflow.com/questions/66067020/react-app-with-css-module-multiple-classes

Answer 1

you should pass the classes declared at your css modules through your styles object, instead of passing a string:

      <button className={[styles.class, styles.awesome, styles.great].join(' ')}>
          hello world
      </button>