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

Question

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

React组件render() 的方法：

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

CSS代码：

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

这是一个codeandbox示例。

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

Answer 1

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

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

activeClassName={CSSModule.active}否则，您应该为每个设置NavLink并确保.active在您的样式中定义