情感/風格 - Hover 在 SVG 組件上

Question

我有一個組件，它是一個 SVG，其中只有一個路徑元素。 它被導入並呈現為：

<svg ... >
 <path>...</path>
</svg>

我正在嘗試用emotion/styled來設計它：

const StyledSvg = stlyled(SvgIcon)`
   &:hover {
     fill: <someColor>
   }
`;

它什么都不做。 試圖將 hover 強加給檢查員，但仍然一無所獲。 知道是否可能嗎？我該如何實現？

謝謝

編輯組件：

const Play: Icon = ({ style }) => {
  return (
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="20" viewBox="0 0 30 20">
        <path d="..."/>
      </svg>
  );
};

Answer 1

我不知道你的Icon類型是什么樣的，但我讓它像這樣工作：

type ComponentProps = {
  className?: string;
};

const Play: React.FC<ComponentProps> = ({ className }) => (
  <svg
    className={className}
    xmlns="http://www.w3.org/2000/svg"
    width="30"
    height="20"
    viewBox="0 0 30 20">
    <path d="M 10 10 H 90 V 90 H 10 L 10 10" /> // replace with your path
  </svg>
);

const StyledSvg = styled(Play)`
  &:hover {
    fill: blue;
  }
`;

function App() {
  return (
    <div className="App">
      <StyledSvg />
    </div>
  );
}

此解決方案需要設置className道具才能工作。