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

Question

我的active class的 CSS 似乎没有应用到渲染组件上，即使实际应用了 CSS 的 rest。 使用 CSS 模块应用 CSS。 由于 react-router-dom package 的NavLink组件将 class 设置为活动状态，因此我在 CSS 文件中选择了活动的 class，但由于某种原因，所有内容都应用于呈现的 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 模块以某种方式阻止应用活动 class 的样式。

Answer 1

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

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

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

Answer 2

只需将您的选择器更改为my-active而不是.active ：

.Nav ul a:hover,
.Nav ul a.my-active {
  border-bottom: 1px solid black !important;
}