在我的React項目中，我想在懸停時改變svg的筆畫顏色。我通過將svg作為ReactCompnent導入，然后有條件地發送prop(使用State hook來確定它是否被懸停)來實現這一點。但是我想知道是否有其他簡單的方法來解決這個問題？因為，如果對多個svg圖標這樣做，會使代碼變得冗長。 我的代碼如下:

import { useState } from "react";
import { render } from "react-dom";
import "./index.css";
import { ReactComponent as Icon_5 } from "./icon_5.svg";

function App() {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = () => {
    setIsHovered(true);
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };
  return (
    <>
      <div>
        <h1>Using with prop</h1>
        <Icon_5
          className="icon"
          stroke={isHovered ? "#FF0000" : "#00ade9"}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
      </div>
    </>
  );
}

render(<App />, document.getElementById("root"));

我也嘗試通過css應用顏色，但問題是，每個svg有不同的結構。例如，要完全改變這個圖標的筆畫，我必須這樣給它css:

.icon_1 path {
  stroke: green;
}

.icon_1 line {
  stroke: green;
}

.icon_1 rect {
  stroke: green;
}

這因每個svg圖標而異。因此，這種方法似乎不適合這種情況。

這是一個代碼沙盒的例子:https://codesandbox.io/s/svgfill-3-w7kl7n?文件=/index.js:0-684

使用CSS :hover有什么問題？

它與svg元素一起工作。

<>
      <div>
        <h1>Using with prop</h1>
        <Icon_5 className="icon icon-5" />
      </div>
    </>

svg.icon-5 { stroke: #00ade9; }
svg.icon-5:hover { stroke: #FF0000; }

除非我遺漏了什么

只需給svg組件的父組件一個id或類，并從所有svg中刪除屬性和筆劃。那么在css中你可以使用:

.parent svg{
stroke:gray;
}
.parent svg:hover{
stroke:red;
}

您還可以給每個svg標簽(在svg文件中)一個單獨的id，并使用它來設置樣式。即使您使用svg作為react組件，它在最后也僅呈現為普通的svg，css應用于最終結果，因此您可以像訪問常規svg標記一樣訪問它。如果svg的所有子部分(path、rect等)的圖標都只有一種顏色，我建議您刪除SVG中的所有筆畫..).否則，在SVG上使用外部和內部樣式可能會遇到問題。 也不要像那樣直接使用render()，使用: ReactDOM.createRoot()

查看codeandbox示例:https://codesandbox.io/s/svgfill-3-forked-nzjdc3?文件=/index.js 檢查index.js和index.css文件。