如何使用样式组件在 reactjs 中设置 svg 样式

问题描述

import { faregHeart } from 'react-icons/fa';


const IconHeart = styled(faregHeart)`

width:21px;
height:18px;
position: absolute;
left: 28%;
top:30%;
cursor: pointer;
&:hover{
 background-color:red;
}
`


function Heart() {
  return (
    <HeartBox>

      <IconHeart />

    </HeartBox>

  )
}

客人：

我完全控制了 svg 图标，悬停在这个图标上不起作用。喜欢在图标周围有边框，但是如果我设置边框，他会在图标周围放置边框而不是在其本身

解决方法

你需要使用SVG的填充属性

b

代码沙盒示例：
https://codesandbox.io/s/styled-hover-fill-svg-iks37