The CSS for my active class does not seem to get applied on the rendered ponent, even though the rest of the CSS is actually applied. The CSS is applied using CSS modules. Since the NavLink ponent of react-router-dom package sets the class to active, I have selected the active class in the CSS file, but for some reason everything gets applied to the rendered HTML but that specific selection.

The render() method of the React ponent:

render () {
        return (
            <Fragment>
                <nav className={CSSModule.Nav}>
                     <ul>
                         <li><NavLink to="/" exact>Home</NavLink></li>
                         <li><NavLink to={{
                             pathname: "/new-post",
                             hash: "#submit",
                             search: "?quick-submit"
                         }}>New Post</NavLink></li>
                     </ul>
                 </nav>
            
            <Route 
                path={["/", "/home"]} 
                exact 
                ponent={Posts} />

            <Route 
                path="/new-post"
                exact 
                ponent={NewPost} />

            </Fragment>
        );
    }

The CSS code:

.Nav {
    box-sizing: border-box;
    padding: 20px;
}

.Nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    background-color: burlywood;
    padding: 10px;
}

.Nav ul a {
    color: black;
    text-decoration: none;
}

.Nav ul a:active {
    color: white;
}

.Nav ul a:hover,
.Nav ul a.active {
    border-bottom: 1px solid black;
}

Here is a codesandbox sample.

After some more detailed research, it would seem like CSS Modules somehow block the styling for the active class from getting applied.

The CSS for my active class does not seem to get applied on the rendered ponent, even though the rest of the CSS is actually applied. The CSS is applied using CSS modules. Since the NavLink ponent of react-router-dom package sets the class to active, I have selected the active class in the CSS file, but for some reason everything gets applied to the rendered HTML but that specific selection.

The render() method of the React ponent:

render () {
        return (
            <Fragment>
                <nav className={CSSModule.Nav}>
                     <ul>
                         <li><NavLink to="/" exact>Home</NavLink></li>
                         <li><NavLink to={{
                             pathname: "/new-post",
                             hash: "#submit",
                             search: "?quick-submit"
                         }}>New Post</NavLink></li>
                     </ul>
                 </nav>
            
            <Route 
                path={["/", "/home"]} 
                exact 
                ponent={Posts} />

            <Route 
                path="/new-post"
                exact 
                ponent={NewPost} />

            </Fragment>
        );
    }

The CSS code:

.Nav {
    box-sizing: border-box;
    padding: 20px;
}

.Nav ul {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    background-color: burlywood;
    padding: 10px;
}

.Nav ul a {
    color: black;
    text-decoration: none;
}

.Nav ul a:active {
    color: white;
}

.Nav ul a:hover,
.Nav ul a.active {
    border-bottom: 1px solid black;
}

Here is a codesandbox sample.

After some more detailed research, it would seem like CSS Modules somehow block the styling for the active class from getting applied.

• javascript
• css
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Aug 14, 2021 at 16:27 gusti asked Aug 14, 2021 at 12:22 gustigusti 5451010 silver badges3030 bronze badges 2

• 1 Could you please share a sample of your code in codesandbox? – Majid M. Commented Aug 14, 2021 at 13:25
• @MajidM. added one right now. – gusti Commented Aug 14, 2021 at 13:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

you should remove all activeClassName="my-active" in app.js and add this in styles.module.css

a[class="active"] {
  border-bottom: 1px solid black !important;
}

otherwise you should set activeClassName={CSSModule.active} for each NavLink and be sure that the .active is defined in your style

Just change your selector to my-active instead of .active:

.Nav ul a:hover,
.Nav ul a.my-active {
  border-bottom: 1px solid black !important;
}