如何使用样式化组件更改反应图标中的字体大小答案

【问题标题】：How to change fontSize in react icon using styled components如何使用样式化组件更改反应图标中的字体大小
【发布时间】：2021-08-25 21:37:45
【问题描述】：

我想通过增加图标大小来制作悬停效果，图标来自反应图标，我正在使用样式组件。我该怎么做？

 export const BottomBar = () => {
  const style = { fontSize: "180%" };
  return (
    <StyledBottomBar>
      <StyledIcon>
        <FaFacebookSquare style={style} />
      </StyledIcon>
      <StyledIcon>
        <GrInstagram style={style} />
      </StyledIcon>
      <StyledIcon>
        <CgMail style={style} />
      </StyledIcon>
      <StyledIcon>
        <BiPhoneCall style={style} />
      </StyledIcon>
    </StyledBottomBar>
  );
};

谢谢！！！

【问题讨论】：

标签： reactjs styled-components react-icons

【解决方案1】：

不能像:hover 那样做内联样式的动作。你可以使用JS方法onMouseEnter和onMouseLeave：

const style = { fontSize: "180%",transition: 'font-size 0.5s'  };
...
<FaFacebookSquare style={style} onMouseEnter={({target})=>target.style.fontSize= "180%"} 
  onMouseLeave={({target})=>target.style.fontSize= "100%"}/>

或者你可以将它们分成组件<StyledIcon/>然后useRef、useEffect和useState来做悬停。

const style = { fontSize: "180%",transition: 'font-size 0.5s' };
export function StyledIcon(props){
const [hover,setHover] = useState(false)
const iconRef = useRef(null)

  useEffect(()=>{
    if(hover){
      iconRef.current.style.fontSize="200%"
    }
    else{
      iconRef.current.style.fontSize="180%"
    }
  },[hover]) // changing fontSize whenever the hover state is updated
const handleIconType = ()=>{
    switch(props.type){
      case 'facebook':
        {
          return <FaFacebookSquare style={style} ref={iconRef} onMouseEnter={()=>{setHover(true)}} onMouseLeave={()=>{setHover(false)}}/>
        }
      ...// cases for different type of icon
      default:
        return null
    }
  }
  return(
  <>
     <FaFacebookSquare style={style} ref={iconRef} onMouseEnter={()=>{setHover(true)}} onMouseLeave={()=>{setHover(false)}}/>
  </>
  )
}
export const BottomBar = () => {
  
  return (
    <StyledBottomBar>
      <StyledIcon type="facebook">
      </StyledIcon>
      <StyledIcon type="instagram">
      </StyledIcon>
    </StyledBottomBar>
  );
};

【讨论】：

【解决方案2】：

所以 react-icons 将被渲染为 <svg> 元素。这些具有您可以用样式覆盖的属性，您只能通过对元素本身的操作来操作它们。

在您的示例中，如果您查看开发工具并检查 html，则 svg 元素周围可能有一个 div 包装器，这意味着您尝试应用于它们的样式已应用于 div。

const style = { fontSize: "180%",transition: 'font-size 0.5s'  }

//Try writing it like this:
const style = {
    '& svg': {
        fontSize: '180%',
        transition: 'fontSize 0.5s'
    }
}

这里我们将这些规则应用到 svg 元素而不是它的包装器。

编辑如果您想收听点击或悬停，您可以在包装 svg 的 div 上收听！确保它也具有相同的大小。

【讨论】：