Блог

Главная - Вопросы по программированию - Как изменить размер шрифта в значке react с помощью стилизованных компонентов

Как изменить размер шрифта в значке react с помощью стилизованных компонентов

#reactjs #styled-components #react-icons

Вопрос:

Я хочу создать эффект наведения с увеличением размера значка, значки взяты из значков react, я использую стилизованные компоненты. Как мне это сделать ?

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

Спасибо!!!

Ответ №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:

Поэтому реагируйте-значки будут отображаться как <svg> элементы. У них есть свойства, которые вы можете переопределить с помощью стилей, вы можете манипулировать ими только с помощью действий над самим элементом.

В вашем примере, если вы посмотрите на инструменты разработки и просмотрите html, то, вероятно, вокруг элемента svg есть оболочка div, означающая, что стили, которые вы пытались применить к ним, были применены к div вместо этого.

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

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

Здесь мы применяем эти правила к элементу svg, а не к его оболочке.

ОТРЕДАКТИРУЙТЕ, если вы хотите слушать щелчки или зависания, вы слушаете div, который обертывает svg! Убедитесь, что он тоже одинакового размера.

Метки: