Para o desenvolvimento de uma aplicação utilizando a biblioteca ReactJS, a adição de estilos pode ocorrer de muitas formas, desde nomear as tags do JSX com className ou usando bibliotecas auxiliares nos estilos de sua aplicação. No presente artigo, será demonstrado como é utilizar a biblioteca styled-components, para a adição de estilos nas páginas de sua aplicação.
1. Instalação
Para instalação desta lib, o seu projeto em ReactJS já deve estar criado, utilizando o comando npx create-react-app nome_aplicativo. Com isso, na pasta de seu projeto, no terminal de sua IDE (no caso, do Visual Studio Code) ou do seu Prompt de Comando, digite o comando:
npm install styled-components
Após digitar o comando, é necessário teclar ENTER e, aguardar a instalação da lib. Pode ser um procedimento demorado, dependendo de sua internet.
2. Como usar?
Depois que a lib foi instalada, é necessário importar ela no começo dos arquivos que ela será utilizada. Para isso, é necessário digitar:
import styled from ‘styled-components’;
Feito isso, para estilizar as tags do JSX, que são similares ao HTML (input, h1, div, p, label), elas deverão ser atribuídas a uma variável e, usar o prefixo styled antes das mesmas, conforme exemplo:
const Label = styled.label
O que está à esquerda (antes do sinal de igualdade) seria a declaração de uma variável Label e o que está à direita (depois do sinal de igualdade) seria a junção de uma tag JSX com o prefixo styled. Qualquer tag, conforme mencionado acima, pode ser prefixada com o styled, seja ela uma div ou um parágrafo (p).
Para atribuir estilos para essa variável Label, são utilizadas crases, para fazer o que é similar a uma interpolação de strings (“). Veja o exemplo:
Os estilos são iguais ao do CSS puro, contudo, todo conteúdo de atribuição de estilos a variável Label precisa estar dentro de crases (“).
Por conseguinte, para utilização desse estilo em sua aplicação, o uso é similar ao de um componente. O uso seria uma tag <Label></Label>, nos pontos desejados de utilização, conforme exemplo abaixo:
A tag é utilizada e não há necessidade de replicar a tag <label></label> novamente.
Esses estilos são muito fáceis de serem utilizados, não é? Lembrando que somente uma tag pode ser prefixada com o styled, não podendo ter algo como:
const Input_Label = styled.input.label`
Estilos
`
(O comando acima não funciona, pois juntou a tag input junto com a label).
Alguns outros exemplos utilizados:
O projeto exemplificado com os códigos acima, está disponível no Youtube um vídeo demo para demonstração de como ficou.
