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