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