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

Posted 2023-02-22

【中文标题】React CSS 模块 - 一些 CSS 未应用（用于 NavLink 组件设置的“活动”类）

【英文标题】：React CSS Modules - Some CSS is not applied (for 'active' class set by NavLink component)

【发布时间】：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。现在加了一个。

【参考方案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。