我如何进一步自定义我的反应路由器 dom NavLink activeStyle答案

【问题标题】：How can i further customize my react router dom NavLink activeStyle我如何进一步自定义我的反应路由器 dom NavLink activeStyle
【发布时间】：2021-01-12 13:10:00
【问题描述】：

所以我有这个带有反应路由器的简单但设计得不太好的导航栏

import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'
import './App.css';

function App() {
  return (
    <div className="App">

      <Router>

      <nav>
        <ul>
          <li><NavLink to="/" exact activeStyle={{color:"green"}}>Home</NavLink></li>
          <li><NavLink to="/about" activeStyle={{color:"green"}}>about</NavLink></li>
          <li><NavLink to="/contact" activeStyle={{color:"green"}}>contact</NavLink></li>
        </ul>
      </nav>
      <Route path="/" exact render={() => <h1>Home</h1>}/>
      <Route path="/about" render={() => <h1>About</h1>}/>
      <Route path="/contact" render={() => <h1>Contact</h1>}/>



      </Router>
    </div>
  );
}

export default App;

这是NavLink 的一个非常简单的用法。我想知道如何向它添加更多样式，例如如何访问<a> 标记的::before 和::after 元素以添加下划线动画。我知道如何在 CSS 中做到这一点，但我很困惑如何在NavLink 中添加它。我将非常感谢任何建议。

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您可以使用 activeClassName 代替样式并使用 css 中的类选择器来操作元素以进行额外的样式更改。

【讨论】：

【解决方案2】：

您可以使用 styled-components 并执行以下操作：

const MenuLink = styled(NavLink)`
    // link styles here
    &.active::before {
        // link ::before styles here
}`

那你就可以用了

<li><MenuLink to="/" exact activeStyle={{color:"green"}}>Home</NavLink></li>

【讨论】：