2

Estou tentando criar um estado para setar um ícone como active mudando sua cor, porém estou falhando miseravelmente por ter pouco conhecimento.

Criei um estado com o useState e coloquei o valor true por padrão para poder testar se iria funcionar.

No meu ícone, passei active={active} e nos meus estilos, eu peguei ele como:

styled-components:


svg{
   color: ${props => props.active ? 'cornumero1' : 'cornumero2'};
}

index.js:

<li>
 <Icon.GoGraph size={20} active={active} />
 <p>Gestão de cobrança</p>
</li>

Eu estou errando em alguma coisa ou esquecendo algo, porque o ícone vem diretamente no else, ou seja, como false.

Como resolver?

4
  • Olhando pelo que você postou parece estar tudo certo. Tem que ver se essa propriedade active está realmente dentro desse componente onde tem o svg, saca? 3/12/2019 às 17:08
  • @CarlosQuerioz Entendi, realmente não deve ter pois é o pacote "react-icons"... mas então, como eu faria para criar isso ? Pois estou usando cerca de uns 20 icones na pagina. 3/12/2019 às 17:15
  • Acho que uma das possibilidades é você extender o icone no Styled-Component, tipo const StyledIcon = styled(Icon) e passar o atributo igual fala na documentação. const StyledIcon = styled(Icon).attrs(props => ({color: props.active ? cor1 : cor2}) 3/12/2019 às 17:43
  • Carlos Muito obrigado pela atenção cara, vou ver se consigo do seu jeito depois, eu consegui resolver da seguinte forma, Passei a props no item, vc tinha razão, o icone ali nao aceitava essa props, dai passei na tag pai... e ja extendi essa mesma logica para atribuir valores ao BEFORE e AFTER, interessante que funciona o content com variaveis. 3/12/2019 às 18:15

1 Resposta 1

1

Meu problema era estar passando a props no Icon, o correto é na <li> como um novo componente e agradeço a todos que me ajudaram e em especial ao Carlos Queiroz que me orientou.

Final:

index.js:

<Item active={active}>
  <Icon.GoGraph size={20} />
  <p>Gestão de cobrança</p>
</Item>

styles:

export const Item = styled.li`
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  cursor: pointer;
  svg {
    transition: 0.3s ease;
    color: ${props => (props.active ? '#47B248' : '#939393')};
  }`

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .