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

Posted 2023-03-15

【中文标题】如何使用样式化组件在 reactjs 中设置 svg 样式

【英文标题】：how to style svg in reactjs with styled components

【发布时间】：2021-07-04 05:13:48

【问题描述】：

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 图标，悬停在此图标上不起作用。喜欢在图标周围有边框，但是如果我设置边框，他会在图标周围放置边框，而不是在其本身上

【参考方案1】：

你需要使用 SVG 的填充属性

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

  :hover
    fill:red;
    
`

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