Bibliotecas CSS-in-JS, como componentes com estilo, tornaram-se mais populares nos últimos anos. Eles encapsulam CSS até o nível do componente e permitem que você use JavaScript para definir estilos reutilizáveis.

Usando styled-components, você pode manter a arquitetura orientada a componentes que o React já reforça. Mas a biblioteca também tem algumas desvantagens.

Como funcionam os componentes estilizados

o componentes estilizados A biblioteca CSS-in-JS permite que você escreva CSS dentro de seus arquivos de componentes. Sua sintaxe é a mesma do CSS, então é bem fácil de entender. É um meio termo perfeito para desenvolvedores JavaScript que tendem a ficar longe do CSS puro.

Para ver como funciona, considere o seguinte componente Title que renderiza um elemento h1.

const Título = styled.h1`
tamanho da fonte: 1.5em;
 alinhamento de texto: centro;
 cor vermelha;
`;

Você pode usar este componente como qualquer outro componente React.

const Início = () => {
Retorna (
<Título>Um título de componente estilizado</Title>
	)
}
instagram viewer

Também é muito poderoso porque facilita o trabalho com adereços e estado.

Por exemplo, a cor e o fundo deste componente dependem dos adereços.

importar estilizado a partir de "componentes estilizados";
const Botão = styled.button`
preenchimento: 0.8rem 1.6rem;
 cor de fundo: ${(props) => (props.primary? "roxo": "branco")};
 fronteira: 1px sólido #00000;
 cor: ${(props) => (props.primary? "branco": "roxo")};
`;
exportarpredefiniçãofunçãoCasa() {
 Retorna <Botão principal>Primário</Button>
}

Com componentes estilizados, você não precisa passar manualmente os adereços para o CSS. Está disponível automaticamente, simplificando os estilos de escrita que dependem dos dados do componente.

Prós de usar componentes com estilo

Aqui estão algumas vantagens de usar a biblioteca de componentes com estilo.

Resolve problemas de especificidade CSS

Componentes estilizados eliminam problemas de especificidade, pois encapsulam CSS dentro de um componente. Isso significa que você não precisa se preocupar com nomes de classes conflitantes ou sua interface do usuário se transformando em uma bagunça devido a conflitos de nomes de classes.

Permite que você escreva CSS dentro de componentes

Como visto no exemplo do componente de botão, styled-components permite combinar CSS e JS no mesmo arquivo. Portanto, você não precisa criar um arquivo CSS separado ou ficar alternando de arquivo para arquivo.

Essa é uma grande vantagem ao criar kits de interface do usuário porque você armazena todas as funcionalidades dos componentes em um arquivo.

Fora isso, escrever CSS dentro de componentes. Facilita o compartilhamento de props e estados com estilos.

Permite verificação de tipo

Com componentes estilizados, você pode verificar os tipos de props e valores usados ​​em seus estilos. Por exemplo, você pode reescrever o componente de botão acima usando o TypeScript.

interfaceadereços{
 primário: boleano
}
Botão const = styled.button<adereços>`
preenchimento: 0.8rem 1.6rem;
 cor de fundo: ${(props) => (props.primary? "roxo": "branco")};
 fronteira: 1px sólido #00000;
 cor: ${(props) => (props.primary? "branco": "roxo")};
`;

Usando TypeScript no componente significa verificar erros de tipo enquanto você codifica e reduzir o tempo de depuração.

Suporta Theming Out of the Box

Adicionando um tema escuro ou qualquer outro tema para sua aplicação pode ser difícil e demorado. No entanto, os componentes com estilo simplificam o processo. Você pode adicionar temas ao seu aplicativo exportando um componente do invólucro.

const Botão = styled.main`
 cor de fundo: ${props => adereços.tema.luz.fundo};
 cor: ${props => props.theme.light.fontColor};
`
<ThemeProvider theme={theme}>
<Botão>
 Botão de luz
</Button>
</ThemeProvider>

O componente ThemeProvider passa os temas para todos os componentes estilizados que ele envolve. Esses componentes podem usar os valores do tema em seus estilos. Neste exemplo, o botão usa os valores do tema para as cores do plano de fundo e da fonte.

Contras de usar componentes com estilo

Embora o uso da biblioteca de componentes com estilo tenha muitos benefícios, também apresenta desvantagens.

Não é independente de estrutura

Escrever CSS em JS significa que separar os dois no futuro será difícil, o que é terrível para a manutenção. Por exemplo, se você decidir mudar de Estrutura JavaScript, você precisará reescrever a maior parte de sua base de código.

Isso é demorado e caro. Usando Módulos CSS ou uma biblioteca independente de framework como a emoção é mais à prova de futuro.

Pode ser difícil de ler

Diferenciar entre componentes com estilo e React pode ser difícil, especialmente fora de um sistema de design atômico. Considere este exemplo:

<Principal>
<Navegação>
<ListItem>
<Texto do link>Adote um animal de estimação</LinkText>
</ListItem>
<ListItem>
<Texto do link>Doar</LinkText>
</ListItem>
</Nav>
<Cabeçalho>Adote, não't loja!</Header>
<SecondaryBtn btnText="Doar" />
</Main>

A única maneira de saber qual componente contém lógica de negócios é verificando se ele possui props. Além disso, embora os nomes dos componentes neste exemplo sejam descritivos, ainda é difícil visualizá-los.

Por exemplo, o componente Header pode ser um título, mas, a menos que você verifique os estilos, talvez nunca saiba se é um h1, h2 ou h3.

Alguns desenvolvedores resolvem esse problema usando apenas o componente com estilo como um wrapper e usando as tags HTML semânticas para os elementos dentro dele.

Neste exemplo, o componente de cabeçalho poderia usar uma tag h1.

<h1>Adote, não't loja!</h1>

Você pode levar isso adiante definindo os componentes estilizados em outro arquivo (por exemplo, styled.js), que você pode importar posteriormente para um componente React.

importar * Como Estilo a partir de './estilizado'
// usa styled.components
<estilizado. Principal>
// código
</styled.Main>

Isso lhe dá uma visão clara de quais componentes são estilizados e quais são componentes React.

Componentes estilizados são compilados em tempo de execução

Para aplicativos que usam componentes com estilo, o navegador baixa o CSS e o analisa usando JavaScript antes de injetá-los na página. Isso causa problemas de desempenho porque o usuário deve baixar muito JavaScript no carregamento inicial.

CSS estático é muito mais rápido. Ele não precisa ser processado antes que o navegador o use para estilizar as páginas. No entanto, a biblioteca de componentes com estilo está melhorando a cada lançamento. Se você puder arcar com um desempenho reduzido, vá em frente e use-o.

Quando usar componentes com estilo

Alguns desenvolvedores gostam de escrever CSS em arquivos JS, enquanto outros preferem ter arquivos CSS separados. Como você escolhe escrever CSS deve, em última análise, depender do projeto em si e do que você ou sua equipe gosta. Componentes estilizados são uma boa opção para construir uma biblioteca de interface do usuário, pois tudo pode estar em um arquivo e ser facilmente exportado e reutilizado.

Se você preferir escrever CSS puro, use módulos CSS. Você pode ter arquivos CSS separados, e estilos de escopo localmente por padrão. Independentemente da escolha que você fizer, é essencial ter um conhecimento sólido de CSS.