Javascript 情感/样式-悬停在SVG组件上

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

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

它什么也不做。试图强迫巡查员悬停，但仍然没有结果。如果可能的话有什么想法吗？我怎样才能做到

谢谢

编辑 组成部分：

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

const Play:Icon=（{style}）=>{
返回(
);
};

我不知道你的

图标类型是什么，但我让它像这样工作：

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

type ComponentProps={
类名？：字符串；
};
常量播放：React.FC=（{className}）=>(
//替换为您的路径
);
const StyledSvg=已设置样式（播放）`
&：悬停{
填充：蓝色；
}
`;
函数App（）{
返回(
);
}

此解决方案需要设置
className
道具才能工作。
：hover pseudo class仅适用于锚定标记可以使用onClick切换类当然可以使用useffect:）您可以向我们展示svg元素吗？@enxaneta在我的问题中添加了svg组件。谢谢
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>
  );
}