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

Question

Я довольно плохо знаком с React и не могу решить эту проблему. По сути, я хочу изменить только цвет тега «FontAwesomIcon» при наведении на кнопку, но не цвет текста внутри тега «span». Я также использую реагировать bootstrap. Вот мой код,

<div class="tab">
   <Link to="/dataset-upload">
      <button class="tablinks" onClick={this.handleClick}>
            <FontAwesomeIcon icon={faCloudUploadAlt} size="lg"/> 
            <span>Dataset Upload</span>
      </button>
  </Link>
</div>

, здесь CSS для FontAwesomeIcon,

.tab button FontAwesomeIcon:hover{
    color: #86BC25;
}

Если я заменил FontAwesomeIcon на span в CSS, это работает.

Буду признателен за любые предложения или советы.

Answer 1

Вы можете использовать свойство className для компонента FontAwesomeIcon.

Так что просто напишите правило css:

.tablinks:hover .fa-icon {
  color: red;
}

и затем передайте этот класс компоненту :

<FontAwesomeIcon icon={faCloudUploadAlt} size="lg" className="fa-icon" /> 

Answer 2

Используя CSS, вы можете достичь результата,

HTML: Добавьте className скажем как upload-icon к родительскому div и className сказать как * От 1008 * до FontAwesomeIcon.

<div className="tab upload-icon">
 <Link to="/dataset-upload">
   <button className="tablinks" onClick={this.handleClick}>
   <FontAwesomeIcon
     icon={faCloudUploadAlt}
     size="lg"
     className="font-upload"
      />
    <span>Dataset Upload</span>
    </button>
  </Link>
</div>

CSS: При наведении курсора на родительский div upload-icon, измените цвет на font-upload как,

.upload-icon:hover .font-upload {
  color: green;
}

Рабочая песочница

Примечание: Пожалуйста, рассмотрите возможность использования className вместо class .. Ссылка на ссылку

Answer 3

Поскольку CSS может многое, я не буду вдвое больше.

Но, если вы хотите написать чистый JSX без styled-components или чего-то еще.

Вы можете сделать Событие buttonOver кнопки полностью контролируется:

import React, { useState } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";

export default function App() {
  const [over, setOver] = useState(false);
  return (
    <div className="App">
      <button
        onMouseOver={() => setOver(true)}
        onMouseLeave={() => setOver(false)}
      >
        <FontAwesomeIcon
          icon={faCloudUploadAlt}
          size="lg"
          style={over ? { color: "red" } : {}}
        />
        <span>Dataset Upload</span>
      </button>
    </div>
  );
}