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

Question

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>

  )
}

提问：

I what full contorl over the svg icon, hover do not work on this icon. LIke to heart have border around icons, but if i set border he put put border around icon not on inon itsef

Answer 1

您需要使用SVG的填充属性

const IconHeart = styled(FaRegHeart)`
  width:21px;
  height:18px;
  position: absolute;
  left: 28%;
  top:30%;
  cursor: pointer;

  :hover{
    fill:red;
    }
`

Codesandbox 示例：
https://codesandbox.io/s/styled-hover-fill-svg-iks37

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

how to style svg in reactjs with styled components

reactjs

svg

styled-components

react-icons