Boa tarde, pessoal!
Alguém poderia me explicar este trecho de código?
const SpanEstilizado = styled.span`
Não entendi porque foi igualado à Interface Props...
Obrigado!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa tarde, pessoal!
Alguém poderia me explicar este trecho de código?
const SpanEstilizado = styled.span`
Não entendi porque foi igualado à Interface Props...
Obrigado!
Olá, Leonardo!
No trecho de código que você mencionou, o const SpanEstilizado = styled.span<Props>. A igualdade com a interface Props serve para informar que o componente SpanEstilizado pode receber essa propriedade e utilizá-la em seu estilo. A interface Props é definida anteriormente no código e possui outras propriedades, como children, que é utilizada para renderizar o conteúdo dentro da span!
Sendo assim, a utilização dessa estrutura nos permite estilizar e dinamizar o conteúdo presente em cada <span>.
Essa interface Props é utilizada para definir os tipos das propriedades que o componente irá receber. No caso desse exemplo, o componente SpanEstilizado pode receber a propriedade imagem, que é do tipo string.
Dessa forma, quando utilizamos o componente SpanEstilizado em algum lugar do código, podemos passar a propriedade imagem e seu respectivo valor para personalizar o estilo do componente. Por exemplo:
<SpanEstilizado imagem="caminho/para/imagem.png" />
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Obrigado pela explicação, Victor!