Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problema com ternário

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos, no capítulo Componentes iniciais e fontes e atividade Importando as fontes do projeto #1

por João Pedro Amaral Bonfim
| 70.4k xp | 37 posts

Estava fazendo a parte do ternário no color do styled.li e por algum motivo ele cai sempre no else e todas as cores ficam iguais:

import styled from "styled-components"

const StyledItem = styled.li`
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
    a{
        text-decoration: none;
        color: ${ props => props.active ? '#7B78E5' : '#D9D9D9'};
    }
`

function ListIcons({children, active = false, activeImage, inactiveImage}) {
  return (
    <StyledItem $active={active}>
        <img src={active ? activeImage : inactiveImage} alt="Icon Image" />
        <a href="#">{children}</a>
    </StyledItem>
  )
}

export default ListIcons

Sendo que o active do primeiro item está como true pelas props.

1 resposta
solução!
por Renan Cezar Wuicik
| 2965.8k xp | 6091 posts
Instrutor Suporte Educacional Start By Alura

Olá João! Tudo ok contigo?

Pelo código que você compartilhou, parece que o problema está na passagem da propriedade active para o componente StyledItem. No código, você está usando $active como nome da propriedade, mas na hora de acessá-la dentro do styled component, você está usando props.active.

Para corrigir isso, você precisa alterar a linha <StyledItem $active={active}> para <StyledItem active={active}>. Assim, você estará passando a propriedade corretamente para o componente.

Além disso, no styled component, você está usando props.active para definir a cor do texto, mas no código você está usando props => props.active ? '#7B78E5' : '#D9D9D9'. Isso pode estar causando o problema de todas as cores ficarem iguais.

Para corrigir isso, você pode alterar a linha color: ${ props => props.active ? '#7B78E5' : '#D9D9D9'}; para color: ${props => props.active ? '#7B78E5' : '#D9D9D9'};. Removendo o espaço entre props e =>.

Dessa forma, o código deve funcionar corretamente e a cor do texto será definida corretamente com base na propriedade active.

No geral era isso. Espero que isso ajude.

Se precisar é só falar.

Abraços e bons estudos!