CSS Classname with ReactJS

Question

 import classes from './NavBar.module.css';

then in the file I am trying to access the css module like this

        <ul className={classes.navbar-nav}>
            <li>Home</li>
        </ul>

In my CSS Module file

.navbar-nav {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: flex-end;
}

The error I get is

'nav' is not defined  no-undef

Stephan Vierkant · Accepted Answer · 2021-07-25 19:06:57Z

1

You should use classes["navbar-nav"]. You can't use the dot operator because name variables cannot have -.

For a better understanding, read about naming of javascript variables

Stephan Vierkant

10.3k8 gold badges67 silver badges102 bronze badges

answered Jul 24, 2021 at 2:36

Viet

12.9k2 gold badges18 silver badges23 bronze badges

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

3 Comments

That worked but why didn't i use the dot (.) operator?

Because name variable cannot has "-". You need to read about naming of js variable