React CSS 模块 - 一些 CSS 未应用（对于 NavLink 组件设置的“活动”class）

Question

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.

Answer 1

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

Answer 2

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