javascript - How can i further customize my react router dom NavLink activeStyle

Question

so I have this simple not very well designed navbar with react router

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;

That's a very simple use of NavLink. Im wondering how can I add more styles to it for example how do I access the ::before & ::after element of the <a> tag from the to add underline animation to it. I know how to do that in CSS but I'm very confused how do I add that in NavLink. I will very much appreciate any suggestion.

Answer 1

You can use activeClassName instead of style and manipulate the element using the class selector in css for additonal styling changes.