我无法使用 react-router 在 React 中设置活动路由的样式

Question

我打算使用 react-router 在 React 中设置活动路由的样式。我正在使用 NavLink 这样做。请看下面的代码：

组件.JS

import React from 'react';
import classes from './navBar.module.css';
import {NavLink} from 'react-router-dom'

const NavBar = (props) => {
    return (
        <div className={classes.navBarStyle}>
            <p className={classes.navBarTitle}>EMPOYEE DATABASE</p>
            <nav className={classes.nav}>
               <ul className = {classes.navUl}>
                   <li><NavLink to="/" exact>HOME</NavLink></li>
                   <li><NavLink to="/addEmployee">ADD</NavLink></li>
               </ul>
            </nav>
        </div>
    )
}

export default NavBar;

组件.module.css

.nav {
    height: 100%;   
}

.navUl {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
}

.navUl li {
    height: 100%;
}

.navUl li a{
    text-decoration: none;
    color: inherit;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}


.navUl li a:hover{
    background-color: rgb(235, 91, 25);
}

/* STYLING THE ACTIVE ROUTE HERE */
.navUl li a.active {
    background-color: rgb(119, 47, 14);
    border-bottom: 2px solid white;
}

I can see the class = "active"getting embedded inside the anchor tag when a particular route is selected.

因此，我打算使用 进行样式设置a.active，但它没有按照 css 文件中的指定样式进行设置。我在 CSS 中没有看到任何特定问题，甚至样式也没有出现在 chrome 开发人员工具中。讽刺是a:hover有效的，但a.active不是。我哪里错了？

Answer 1

它不起作用的原因是因为您正在使用 CSS 模块并且它会破坏类的名称以将其本地范围限定到您的 JSX 文件。您的课程在编译后不再.active被调用.active。它将以类似.navUl_active__10Mm9（作为示例）为前缀和后缀。然后，您的 JSX 将无法选择该类，因为它仍在寻找.active. 您可以通过使用导入的类作为activeClassName.

您可以保持 CSS 不变：

.navUl li a.active {
   background-color: rgb(119, 47, 14);
   border-bottom: 2px solid white;
}

以同样的方式导入你的 CSS：

import classes from './navBar.module.css';

添加导入的样式：

<li><NavLink activeClassName={classes.active} to="/" exact>HOME</NavLink></li>
<li><NavLink activeClassName={classes.active} to="/addEmployee">ADD</NavLink></li>

在这里，您的 JSX 将使用 CSS 类编译成的任何内容。

Answer 2

I think I found a bit better approach, using :global. Class active is default react router active link class.

// AppNav.module.scss
.AppNavLink {
  text-decoration : none;

  &:global.active {
    border : 1px solid deeppink;
  }
}

Thanks to this, you don't have to add any extra js/html code anywhere.