情感/风格 - 悬停在 SVG 组件上答案

【问题标题】：emotion/styled - Hover on an SVG component情感/风格 - 悬停在 SVG 组件上
【发布时间】：2020-11-24 13:34:28
【问题描述】：

我有一个组件，它是一个 SVG，其中只有一个路径元素。它被导入并呈现为：

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

我正在尝试使用emotion/styled 对其进行样式设置：

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

它什么也不做。试图强制悬停在检查员身上，但仍然没有。知道是否可行，我该如何实现？

谢谢

编辑组件：

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

【问题讨论】：

:hover 伪类只用于锚标签
也许用 onClick 切换一个类当然使用 useEffect :)
你能给我们看一下svg元素吗？
@enxaneta 在我的问题中添加了 svg 组件。谢谢

标签： javascript css reactjs svg emotion

【解决方案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 属性集才能工作。

【讨论】：