CODEWITHSUNDEEP
javascriptcssreactjsreact-routerreact-router-dom
gusti
gusti

Reputation: 543

React CSS Modules - Some CSS is not applied (for 'active' class set by NavLink component)

The CSS for my active class does not seem to get applied on the rendered component, even though the rest of the CSS is actually applied. The CSS is applied using CSS modules. Since the NavLink component 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 component:

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 
                component={Posts} />

            <Route 
                path="/new-post"
                exact 
                component={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.

Upvotes: 5

Views: 2686

Answers (2)

Ahmad
Ahmad

Reputation: 884

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

Upvotes: 7

Majid M.
Majid M.

Reputation: 4954

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

Upvotes: 1

Related Questions