Jestem całkiem nowy w React i nie mogę rozwiązać tego problemu. Zasadniczo chcę zmienić tylko kolor tagu „FontAwesomIcon” podczas umieszczania wskaźnika myszy na przycisku, ale nie chcę zmienić koloru tekstu wewnątrz tagu „span”. Używam również React-bootstrap. Oto mój kod,

<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>

Oto CSS dla FontAwesomeIcon,

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

Jeśli zamienię FontAwesomeIcon na span w CSS, to działa.

Byłbym wdzięczny za każdą sugestię lub radę.

2
tabrez 1 kwiecień 2020, 16:29

3 odpowiedzi

Najlepsza odpowiedź

Korzystając z CSS możesz osiągnąć wynik,

HTML: dodaj className powiedz jak upload-icon do nadrzędnego elementu DIV i className powiedz jak font-upload do 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: po najechaniu kursorem na nadrzędny element div upload-icon zmień kolor font-upload, na przykład,

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

Działająca piaskownica

Uwaga: rozważ użycie className zamiast class .. Odnośnik

1
Maniraj Murugan 1 kwiecień 2020, 14:19

Możesz użyć właściwości className w komponencie FontAwesomeIcon.

Więc po prostu napisz regułę css:

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

A następnie nadaj tę klasę komponentowi:

<FontAwesomeIcon icon={faCloudUploadAlt} size="lg" className="fa-icon" /> 
2
johannchopin 1 kwiecień 2020, 14:07

Ponieważ CSS może wiele zrobić, nie podwajam tego.

Ale jeśli chcesz napisać czysty JSX bez styled-components czy czegoś takiego.

Możesz w pełni kontrolować zdarzenie przycisku mouseOver:

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

enter image description here

2
keikai 1 kwiecień 2020, 14:27