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

【问题标题】：React CSS Modules - Some CSS is not applied (for 'active' class set by NavLink component)React CSS 模块 - 一些 CSS 未应用（用于 NavLink 组件设置的“活动”类）
【发布时间】：2021-10-17 08:24:04
【问题描述】：

我的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 模块以某种方式阻止了活动类的样式被应用。

【问题讨论】：

能否分享您在代码沙箱中的代码示例？
@MajidM。现在加了一个。

标签： javascript css reactjs react-router react-router-dom

【解决方案1】：

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

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

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

【讨论】：

但是为什么会这样呢？由于 CSS 选择器的特殊性，.Nav ul a.active 不应该覆盖颜色属性吗？无论如何，我已经尝试过这种方法并且不起作用。请检查上面的代码框链接。
您更新的答案建议的这种方法确实适用于代码和框，但在我的环境中仍然不起作用，即使它现在是完全相同的代码。
也许你应该清除你的缓存，或者其他一些类覆盖这个。
我已经更新了codesandbox 上的代码以包含CSS 模块，这似乎是问题所在。拥有 CSS 模块会以某种方式阻止应用活动类的样式。
现在可以了，谢谢！你能解释一下原因吗？

【解决方案2】：

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

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

【讨论】：

请用浏览器的inspect元素检查class，它已被赋予a元素。可能它的名字和.my-active有区别，因为CSSModule。