Как изменить цвет текста и SVG при наведении курсора в React?

Question

Итак, у меня есть следующий компонент React, который в моем случае действует как Navbar. Всякий раз, когда пользователь наводит курсор мыши на элемент панели навигации, он должен изменить свой цвет на тот, который указан. В настоящее время элемент Navbar состоит из 2 элементов: значок (SVG) и текст, описывающий, что это такое.

Поэтому при наведении курсора на компонент необходимо изменить цвет текста и значка.

Вот текущий код:

import { ReactComponent as DashboardIcon } from "../assets/ico_dashboard.svg";

<div className="navBar">
  <ul className="nav-links">
    <li>
      <div className="divHover">
        <a href="#">
          <DashboardIcon className="navLinkHolder" height={50} />
          Dashboard
        </a>
      </div>
    </li>
  </ul>
</div>

CSS:

a:hover {
  color: yellow;
}

Использование этого кода работает с текстом внутри, который является приборной панелью, но SVG не меняет свой цвет. Как мне изменить цвет SVG? Я тоже пытался fill: yellow, но это не сработало

Answer 1

EDIT : это решение работает только для встроенного svg, поскольку браузер может добавить свойство fill также для дочерних элементов svg. Это не обычный c текст, поэтому a не может их заполнить.

(вы можете просто открыть файл svg в текстовом редакторе и скопировать его содержимое)

You следует также применить псевдокласс :hover к классу svg!

navLinkHolder:hover {
  fill: yellow;
}

ПРИМЕР:

.mylink:hover {
  fill: orange;
  color: orange;
 }
 

<div>
  <a href="/" class="mylink">
    my link
    <svg width="24" height="24" class="mysvg">
      <path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
    </svg>
  </a>
</div>

Вы также можете разделить стиль, но вот так svg и текст будут вести себя одинаково в одно и то же время.