эмоция / стиль - наведите указатель мыши на компонент SVG - PullRequest
Новая
       41

эмоция / стиль - наведите указатель мыши на компонент SVG

0 голосов
/ 04 августа 2020

У меня есть компонент, который представляет собой SVG, в котором есть только элемент пути. Он импортируется и отображается как: 

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

Я пытаюсь стилизовать его с помощью emotion/styled: 

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

И ничего не делает. Пытался заставить навести курсор на инспектора и все равно ничего. Есть идеи, возможно ли это и как я могу этого добиться?

Спасибо

EDIT Компонент: 

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

1 Ответ

0 голосов
/ 05 августа 2020

Я не знаю, как выглядит ваш тип 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 prop.

...