Блог

Как я могу изменить цвет текста ссылок на панели навигации в react.

 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>
  

Я пытался сделать это с помощью свойства hover, но это не работает. Я хочу, чтобы цвет текста был синим при нажатии на ссылку и выборе

NavLink дает нам хорошее решение для этого, вот так:

NavItem.module.css:

 .left_navlinks a {
   color:black;
   text-decoration: none;
 }
 
 .left_navlinks a:hover,
 .left_navlinks a:active,
 .left_navlinks a.active {
   color: blue;
 }
  

App.js:

 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;
  

Link Компонент будет отображать <a> элемент. Итак, чтобы изменить его цвет, просто добавьте этот стиль:

 a {
  color: black;
}
  

Вы можете попробовать это здесь.

Вместо добавления в div. Вы можете напрямую передавать класс в link:

 .navLink1{
color: black;
}

   
<div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navlink1"> Home</Link>
                    <Link to="/about" className="navlink2">About</Link>                    
</div>


  

Вот один poc из этого:

 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/>
  );
}

  

Демонстрация:https://stackblitz.com/edit/react-kcmdvt?file=src/App.js

я рекомендовал вам использовать styled-components для добавления css к компонентам.

https://styled-components.com/docs/basics#styling-any-component

   <Link href="#" color="primary">
                <h2>Link</h2>
             </Link>
  

Для того, чтобы ссылка оставалась активной при нажатии, вам нужно будет передать некоторую поддержку этому дочернему компоненту из родительского компонента и иметь троичный оператор для применения className к ссылке, которая соответствует активной из переданной поддержки.

Например:-

 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
  

Вы должны быть в состоянии полностью удалить div и иметь className в компоненте Link, также нет необходимости в разных className для каждого из них.

Чтобы изменить цвет, когда ссылка выбрана в данный момент, вы можете использовать селектор «активный», или, если вы просто хотите, чтобы он изменился, если на него щелкнули, вы можете использовать «посещенный».

Вот пример с ‘активным’ селектором.

 navLink: {
  color: black;
}
navLink:active {
  color: blue;
}
  

Я также предполагаю, что вы импортируете файл css для стиля?

 <div className="left-navlinks">
                    <img className="logo" src={logo}/>
                    <Link to="/"></Link>
                    <Link to="/home" className="navLink">Home</Link>
                    <Link to="/about" className="navLink">About</Link>
                    
</div>
  

Итак, если вы хотите изменить цвет ссылки, щелкнув текст, вы должны использовать метод onClick.Используйте state для сохранения нового цвета, который вы хотите.Код выглядит следующим образом.Обратите внимание, что я использовал функциональный компонент

     const [Color, setColor] = useState([""])
  const handleColor= e =>{
     setColor("blue")
      
  }
return (
    <div className="left-navlinks">

     <div className="navlink1" style={{color:Color}}  onClick={handleColor}>Home</div>
    
  

Прежде всего, я думаю, что лучше использовать NavLink из react-router-dom, а не ссылку. Теперь NavLink возвращает тег. Таким образом, вы можете настроить таргетинг на них .navlinks > a { color: black }. Однако, если вы хотите изменить цвет, например, при активации, вам, вероятно, понадобится параметр !imporant, чтобы перезаписать его. Надеюсь, это сработает.

 const location = useLocation();
  

     <div>
        <img className="logo" src={logo}/>
        <Link to="/"></Link>
        <Link to="/home" className={location.pathname === "/home" ? "navLink1": ""}> Home</Link>
        <Link to="/about" className={location.pathname === "/about" ? "navLink1":""}> About</Link>
    </div>
  

Пожалуйста, попробуйте это. У меня это работает.