Componentes estilizados – Essentials em três etapas

Thomas Weibenfalk Segue 17 de jul · 5 min ler Foto por Olá, eu sou Nik ?? em Unsplash

Eu adoro React and Styled Components. É como construir coisas com tijolos lego em algo maior e inteiro.

Componentes estilizados são incríveis e combinam perfeitamente com o React. Eles realmente são. E eles também são fáceis de entender… realmente. Neste artigo, vou detalhar tudo o que você precisa saber para começar (e além de começar) em três partes. Não profundamente técnico e simplesmente explicado. Se você conhece essas três coisas, você sabe o suficiente para usar o Styled Components em seu projeto sem problemas.

As três coisas são:

  1. Como criar e usar um componente estilizado.
  2. Como modificar seu CSS condicionalmente com adereços
  3. Como criar um estilo global

Eu vou passar por eles um por um agora.

1. Como criar e usar um componente estilizado

Eu vou mergulhar direto nisso. Primeiro você tem que instalar o Styled Components em seu projeto. Faça isso digitando:

 npm i componentes estilizados 

Agora você está pronto para ir. Você pode usar componentes estilizados em seus projetos. Abaixo está um código que explicarei abaixo. Dê uma boa olhada e continue lendo abaixo do código.

O código acima irá criar um componente chamado Login que se parece com isso:

Formulário de login do componente Login.js

Nada extravagante, nada de especial. Apenas um componente de login para nos ajudar a entender melhor os componentes estilizados. Ok … A primeira coisa que você notará no código acima é que temos que dizer ao React que queremos usar o Styled Components. Fazemos isso importando assim:

 importar estilo a partir de “componentes de estilo”; 

Agora nós importamos um objeto chamado styled que podemos usar para estilizar ou componentes. Este objeto tem propriedades diferentes que você pode usar dependendo do que você deseja estilizar. Se for um div, como no nosso exemplo, você simplesmente acessa a propriedade div no objeto styled . Assim: styled.div

Se você quiser estilizar um botão, basta digitar styled.button .
Ou se fosse uma tag h2, você pode digitar styled.h2 … você entendeu!

Essas propriedades estão mantendo funções que você pode chamar com literais de modelo marcados . Isso significa que podemos enviar os dados para essas funções usando backticks e depois colocar nosso CSS entre esses backticks ( `` ). Você também cria uma const para manter o componente estilizado. Então, se quisermos criar um componente com estilo para nosso componente de login, escrevemos abaixo o código:

Em resumo; Para criar um estilo para um elemento div com componentes estilizados, basta usar esta sintaxe:

 const SomeName = styled.div` código CSS vai aqui… `; 

Então você pode apenas usá-lo como um componente regular:

 <SomeName> Seu outro código aqui… </ SomeName> 

Você pode criar quantos desses Componentes Styled precisar. No exemplo acima, criei dois componentes estilizados; Um que é chamado StyledLogin e um que é chamado StyledInput .

Mais uma coisa sobre a criação de um componente com estilo padrão que é bom saber é a parte de aninhamento. Componentes estilizados têm a capacidade de aninhar estilo como você pode fazer, por exemplo, SASS. Você pode ver no código acima que aninhei meu estilo para os elementos h2 e button . Isso é ótimo de muitas maneiras! Isso tornará seu código muito mais estrutural e limpo. Você pode ver facilmente qual estilo pertence a qual componente. Você também está isolando o estilo apenas para esse componente, o que significa que outros elementos h2 e de botão no seu aplicativo não serão afetados.

Então, quando faz sentido, use aninhamento para elementos de estilo. Nem sempre faz sentido embora. Você não precisa criar um novo componente com estilo para cada pequeno elemento. Isso é quando aninhamento como este vem a calhar em seu lugar.

Isso é um … dois para ir.

2. Como modificar seu CSS condicionalmente com adereços.

Componentes estilizados podem receber adereços. Apenas como um componente regular. Passando em adereços ao seu Componente Estilizado, você pode fazer alguns estilos CSS condicionais. Smooooooth… ????

Digamos que queremos mudar a cor do campo de entrada de senha dependendo se o usuário digitou a senha errada ou não.

Ok, eu percebo que esta é uma solução realmente simplificada e que haveria muito mais do que um simples objeto envolvido em coisas como essa. Mas, por causa deste artigo tutorial, digamos que fazemos assim.

Se temos um adereço que é chamado correct definido como false, transformamos nossa caixa de texto em vermelho. Vamos dar uma olhada no código abaixo. Eu intencionalmente deixei de fora o código de estilo para todo o componente Login para economizar espaço. Então, vamos fingir que está lá e é o mesmo que acima.

Isso nos dará este resultado:

Primeiro, dê uma olhada no Componente de Login . E os componentes StyledInput . Eu criei um adereço que é chamado correct e passando em true e false para os dois componentes diferentes. Aquele que obtiver o valor verdadeiro será mostrado em vermelho.
Para acessar este valor prop em seu CSS com CSS, você pode usar o código abaixo:

 plano de fundo: $ {prop => prop.correct? 'branco': 'vermelho'}; 

Você simplesmente cria um operador ternário dentro de uma função de seta rodeada por ${} informando este Componente Estilizado para selecionar a cor branca se prop.correct for false . E use a cor vermelha se prop.correct for true . Simples assim!

Você pode fazer isso com qualquer propriedade CSS que você quiser! That'sE é assim que você faz CSS condicional com adereços no Styled Components.

Dois abaixo… um para ir.

3. Como criar um estilo global.

A última coisa essencial que você precisa saber para usar o Styled Components é criar um estilo global.

O estilo global é obtido usando uma função especial para essa finalidade na biblioteca de Componentes com estilo. Chama-se createGlobalStyle e você importa assim :

 import {createGlobalStyle} de 'componentes com estilo'; 

Então você pode criar um componente com estilo global como este:

Você acabou de colocar o componente de estilo global no nível superior do seu aplicativo. Em seguida, ele usará o estilo em todo o seu aplicativo. Nesse caso, suponho que o componente de nível superior seja denominado App . Você também pode usar adereços e fazer algum CSS condicional em componentes estilizados globais. Assim como os componentes com estilo regulares.

Conclusão

É isso! Há mais em componentes estilizados do que isso, mas acho que esse é realmente o essencial que você precisa saber para usar os componentes estilizados. Se você estiver interessado em aprender mais, eu recomendo que você acesse o site https://www.styled-components.com/docs/ e leia os documentos lá.

Além disso, obrigado por ler este post. Sou um desenvolvedor da Suécia que adora ensinar e codificar. Também crio cursos sobre React e Gatsby online. Você pode me encontrar na Udemy. Basta procurar por Thomas Weibenfalk ou me ligar no Twitter @weibenfalk

Eu também tenho um canal no Youtube onde eu leciono coisas grátis, confira aqui