Comment puis-je modifier la couleur de texte des liens dans la barre NAV dans la réaction.
navLink1{
color: black;
}
<div className="left-navlinks">
<img className="logo" src={logo}/>
<Link to="/"></Link>
<Link to="/home"> <div className="navlink1">Home</div></Link>
<Link to="/about"> <div className="navlink2">About</div></Link>
</div>
8 Réponses :
au lieu d'ajouter en div. Vous pouvez passer directement la classe à lier:
import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import "./style.css";
function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/" className="navLink1">
Home
</Link>
</li>
<li>
<Link to="/about" className="navlink2">About</Link>
</li>
<li>
<Link to="/dashboard" className="navLink1">Dashboard</Link>
</li>
</ul>
<hr />
{/*
A <Switch> looks through all its children <Route>
elements and renders the first one whose path
matches the current URL. Use a <Switch> any time
you have multiple routes, but you want only one
of them to render at a time
*/}
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
// You can think of these components as "pages"
// in your app.
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
export default function App() {
return (
<BasicExample/>
);
}
Le composant lien rendra un élément Vous pouvez l'essayer ici . . Donc, pour changer de couleur, ajoutez simplement ce style:
Je vous ai recommandé d'utiliser composants de style pour ajouter CSS aux composants.
https://styled-components.com/docs/basics#styling -ano-composant
<Link href="#" color="primary">
<h2>Link</h2>
</Link>
une couleur simple avec attribut primaire serait suffisante
Pour conserver le lien sous forme de lien actif lorsque vous avez cliqué, vous devrez transmettre un certain accéder à ce composant enfant à partir du composant parent et disposer d'un opérateur ternaire pour appliquer la noille de classe au lien qui correspond activement à provenance d'accessée.
Par exemple: - P>
import React from 'react';
import { Link } from 'react-router-dom';
function navLink({activeLink}) {
return (
<div className="left-navlinks">
<img className="logo" src={logo}/>
<Link to="/"></Link>
<Link to="/home"> <div className={activeLink === home ? `active-navlink` : `normal-navlink`}>Home</div></Link>
<Link to="/about"> <div className={activeLink === about ? `active-navlink` : `normal-navlink`}>About</div></Link>
</div>
)
}
export default navLink
Vous devriez pouvoir supprimer complètement la div et avoir le nom de classe sur le composant de liaison, il n'y a pas non plus besoin de nom de classe différent pour chacun.
Pour changer la couleur lorsque le lien est l'option actuellement sélectionnée que vous pourriez Utilisez le sélecteur 'actif', ou si vous voulez simplement que cela change s'il a été cliqué s'il a été cliqué, vous pouvez utiliser "visité".
Voici un exemple avec le sélecteur "actif". < Pré> xxx
Je suppose également que vous importez un fichier CSS pour le style?
Vous pouvez également utiliser NavLink qui vous permet d'ajouter ActiveClassName ou ActiveSyle réactrouter.com/web/api/navlink
NavItem.Module.css: P> NavLink code> nous donne une bonne solution pour cela, comme celui-là: import React from "react";
import { NavLink } from "react-router-dom";
import classes from "./navItem.module.css";
class App extends React.Component {
render() {
return (
<>
<div className={classes.left_navlinks}>
<img className="logo" src={logo} />
<NavLink to="/"></NavLink>
<NavLink to="/home" activeClassName={classes.active}>
Home
</NavLink>
<NavLink to="/about" activeClassName={classes.active}>
About
</NavLink>
</div>
</>
);
}
}
export default App;
Donc, si vous souhaitez modifier la couleur de lien en cliquant sur le texte, vous devez utiliser une méthode onclick.Utilisez l'état pour stocker la nouvelle couleur que vous souhaitez. Le code est comme suit.Note que j'ai utilisé un composant fonctionnel
const [Color, setColor] = useState([""])
const handleColor= e =>{
setColor("blue")
}
return (
<div className="left-navlinks">
<div className="navlink1" style={{color:Color}} onClick={handleColor}>Home</div>