Alguém poderia me explicar melhor como funciona a passagem de props para os styled-components?
É só indicar com $nomeDaProp = {prop}?
E para utilizar as props dentro do styled-component sempre utilizaremos uma função? Porque?
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!
Solucionado
Alguém poderia me explicar melhor como funciona a passagem de props para os styled-components?
É só indicar com $nomeDaProp = {prop}?
E para utilizar as props dentro do styled-component sempre utilizaremos uma função? Porque?
Oi Dara, tudo bem?
A passagem de props para os styled-components é um recurso muito útil para personalizar os estilos de acordo com as necessidades de cada componente. Para passar uma prop para um styled-component, você pode utilizar a sintaxe $nomeDaProp = {prop}. Por exemplo, se você tiver uma prop chamada "cor" e quiser utilizá-la no seu styled-component, você pode fazer assim:
const MeuComponenteEstilizado = styled.div`
background-color: ${props => props.$cor};
`;
Dessa forma, você pode passar a prop "cor" para o componente e ela será aplicada como a cor de fundo.
Quanto à utilização das props dentro do styled-component, sim, você sempre utilizará uma função. Essa função recebe as props como parâmetro e você pode acessar as props dentro do styled-component utilizando a sintaxe ${props => props.nomeDaProp}. Por exemplo:
const MeuComponenteEstilizado = styled.div`
font-size: ${props => props.tamanho}px;
`;
Nesse exemplo, a prop "tamanho" será utilizada para definir o tamanho da fonte.
Deixo aqui esse artigo sobre Tagged Template Literals, caso queria ler mais sobre o assunto. Espero que isso tenha esclarecido suas dúvidas.
Um abraço e bons estudos.