1、准备好自定义的样式,并在index.html中引入
index.css中
.nav{
background-color:pink !important;
color: #fff !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
......
<link rel="stylesheet" href="./css/index.css">
......
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
2、使用isActive进行判断
import { NavLink, Routes, Route, Navigate } from 'react-router-dom';
import About from './pages/About';
import Home from './pages/Home';
function App() {
function componentCss({ isActive }) {
return isActive ? 'list-group-item nav' : 'list-group-item'
}
return (
<div className="