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

Rafael Buzatto de Campos · Accepted Answer · 2021-02-05 16:56:43Z

8

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>

edited Feb 5, 2021 at 16:56

answered Feb 5, 2021 at 16:49

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

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

1 Comment

Rafael Buzatto de Campos Over a year ago

you are welcome :) if you feel that answer your question you could consider to check as the accepted answer, cheers

Collectives™ on Stack Overflow

React App with css module multiple classes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related