Reactjs Module CSS multiple class selector

Question

I'm trying to implement or add multiple class in out container when I click a button. But it seems that the styling is not being applied. Below are my code

Layout.module.css

.Content {
    padding-left: 240px;
    min-height: calc(100vh);
    top: 0;
    display: block;
    position: relative;
    padding-top: 80px;
    background: #eee;
    padding-bottom: 60px;
    transition: padding-left 0.2s linear;
}

.Content.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

Now I added the collapse class in my nav component like so

const layout = (props) => (
    <Aux>        
        <Sidebar collapse={props.collapse} />        
        <div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
            <TopNavigation toggle={props.toggle}/>
            {props.children}
            <Footer />
        </div>
    </Aux>  
);

So basically I'm just checking the props if it's collapse or not. If it is then I'll add a text collapse in the class. Now when I click on a button it sets the state.collapse = true/false. It was able to do it's job. Now it seems that it's not reading my css style. Below is the generated class in my DOM

Notice the class .Content styling was detected. But as you can see here

Layout_Content__2WLOk collapse the div container has a class of collapse. So I was thinking it should read the .Content.collapse selector. Am I missing something here?

Answer 1

When using CSS modules, it creates a unique classname for each class for each instance of the component.

So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content

So

<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>

Answer 2

You are using a string not the generated hash

this part will not work

${props.collapse ? 'collapse' : ''}

Quick fix

Try not chaining it.

.collapse {
    padding-left: 100px;
    display: block;
    transition: padding-left 0.2s linear ;
}

and add

classes.collapse instead of collapse

${props.collapse ? classes.collapse : ''}