[Dúvida] Passagem de props do componente para o styled-component

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.