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

我的CSSactive class尽管 CSS 的其余部分实际上已应用，但似乎并未应用到渲染的组件上。 CSS 是使用CSS 模块应用的。自从NavLinkReact-router-dom 包的组件将类设置为活动类，我在 CSS 文件中选择了活动类，但由于某种原因，除了特定的选择之外，所有内容都应用于渲染的 HTML。

The render() method of the 反应组件:

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 https://codesandbox.io/s/infallible-lake-mgr0e?file=/src/styles.css is a 代码沙箱 sample.

经过一些更详细的研究，CSS 模块似乎以某种方式阻止了活动类的样式的应用。

你应该删除所有activeClassName="my-active"在app.js中 并将其添加到styles.module.css

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

否则你应该设置activeClassName={CSSModule.active}对于每个NavLink并确保.active以您的风格定义