Styled Components

Para estilização de componentes, utilizamos a biblioteca Styled-Components. Com ela, utilizamos CSS-In-JS, e criamos componentes já estilizados.

Instalação

    yarn add styled-components
    yarn add -D @types/styled-components

Dica

Para ter Highlights e Autocomplete, podemos utilizar a extensão do Visual Studio
Code vscode-styled-components.

Criando componentes

Componentes simples

Para criar um componente estilizado com Styled-Components, criamos uma váriavel com o nome do componente (seguindo os padrões vistos em Padrões de projetos e na seção "Padrões de projeto" de cada projeto) e atribuimos a ela o objeto styled.(nome da tag HTML). Abrimos uma string literal (` `) e escrevemos dentro o código com síntaxe de SASS.

const Container = styled.div`
    width: ...;
    display: ...;
    ...
`

export { Container }

Componentes com propriedades

Para passarmos propriedades ao estilo do componente, passamos as propriedades em um Generic (< ... >). Para referenciar estas propriedades, faça como abaixo:

const Container = styled.div<{backgroundColor: string}>`
    ${/* 
    Abrimos um espaço para código e fazemos uma arrow function passando o objeto "props" 
    */}
    backgroundColor: ${props => props.backgroundColor};
`

export { Container }

Para usarmos:

// Importando o componente
import { Container } from "./styles"

function Componente() {
    ...
    <Container backgroundColor="#000">
        ...
    </Container>
}

Extendendo estilos

Podemos extender os estilos de outro componente para evitar a repetição de código. Basta passar o componente ao objeto styled na criação de um componente:

    export const Componente2 = styled(ComponenteBase)`
        { ... }
    `