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.