javascript - React CSS 模块 - 某些 CSS 未应用(对于 NavLink 组件设置的 'active' 类)

Question

我的 active class 的 CSS 似乎没有应用到呈现的组件上，即使 CSS 的其余部分实际上已应用。 CSS 是使用 CSS 模块应用的。由于 react-router-dom 包的 NavLink 组件将类设置为事件，我在 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;
}

Here是一个 codesandbox 示例。

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

Answer 1

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

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

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