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?
const StyledIcon = styled(Icon)
e passar o atributo igual fala na documentação.const StyledIcon = styled(Icon).attrs(props => ({color: props.active ? cor1 : cor2})