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?

Try ${props.collapse ? classes.collapse : ''} instead of ${props.collapse ? 'collapse' : ''} — Gabriele Petrioli
– Gabriele Petrioli, Commented May 6, 2020 at 10:03
@GabrielePetrioli dude you should put this as your answer. This solves my problem — MadzQuestioning
– MadzQuestioning, Commented May 6, 2020 at 10:05

Gabriele Petrioli · Accepted Answer · 2020-05-06 10:09:42Z

13

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 : ''}`}>

answered May 6, 2020 at 10:09

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

Comments

Joe Lloyd · Accepted Answer · 2020-05-06 10:04:23Z

1

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 : ''}

answered May 6, 2020 at 10:04

Joe Lloyd

22.8k7 gold badges59 silver badges86 bronze badges

1 Comment

MadzQuestioning Over a year ago

Nice answer. This actually solves it just like @Gabriele answer

Mickael Zana · Accepted Answer · 2020-05-06 10:06:28Z

-1

In React you need to use the keyword 'className' instead of 'class'

https://reactjs.org/docs/dom-elements.html#classname

Also if you want to use CSS Modules you need to import your Layout.module.css file like this

import styles from './Layout.module.css';

And you can add CSS selector like this

<div className={styles.Content}></div>

you can study this here https://www.w3schools.com/react/react_css.asp

edited May 6, 2020 at 10:06

answered May 6, 2020 at 10:00

Mickael Zana

3412 gold badges8 silver badges28 bronze badges

1 Comment

MadzQuestioning Over a year ago

Yeah I just modified it with className but the same thing

Collectives™ on Stack Overflow

Reactjs Module CSS multiple class selector

3 Answers 3

Comments

You are using a string not the generated hash

Quick fix

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

You are using a string not the generated hash

Quick fix

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related