Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: abstraindo seu CSS com Styled Components

React: abstraindo seu CSS com Styled Components

Styled Components - Apresentação

Olá, meu nome é Elaine Mattos e vamos aprender sobre Styled Components, que é uma famosa biblioteca no mundo de React.

Vamos passar sobre conceitos chaves como uso de props, herança de estilos e Mídia Querys.

Abordaremos, também, a componentização da nossa aplicação, que está utilizando um arquivo enorme de CSS. Sendo assim, ele tem muitas classes que podem gerar conflitos e retrabalhos.

Vamos adicionar novas features como um novo componente de extrato implementando ele do zero.

E, também, vamos adicionar temas na nossa aplicação. Sendo eles tema escuro e tema claro.

Eu sou Elaine Mattos, instrutora deste curso e te convido à aprender sobre Styled Components, componentizando e implementando novidades nesta aplicação.

Styled Components - Instalação

Após nós clonarmos e instalarmos as dependências do projeto e ter ele rodando localmente, precisamos entender sobre qual o estado dessa aplicação e qual a razão de migrarmos ela para o Styled Components.

Trabalhamos, atualmente, para a empresa Byte Bank e ela tem essa aplicação web que está muito simples. Então, recebemos essa missão de deixar ela mais interessante adicionando novas funcionalidades como, por exemplo, a troca de temas, de claro para escuro, e um novo componente de status, para visualização da movimentação de conta.

O nosso projeto está aberto com o Visual Studio, no arquivo App.js e temos o arquivo de estilos.css, no navegador de arquivos, onde contém todos os estilos da nossa aplicação.

Poderíamos aplicar essas novas funcionalidades com o projeto da maneira que ele está, mas essa abordagem não é muito escalar e pode render muitas dores de cabeça no futuro.

Pensando dessa forma, faremos a utilização dos Styled Components, mas, primeiramente, o que é o Styled Components?

Na tela está a documentação oficial do Styled Components. Segundo a documentação, o Styled Components é a combinação de tagged template literals do JavaScript e o poder do CSS para escrever um código de estilização para os componentes.

Mas, quais foram as motivações por trás do Styled Components? Dentre vários pontos, podemos citar que o Styled Components mapeia quais os componentes vão ser apresentados na tela e injeta apenas o estilo e nada mais. Dessa forma, permite que o usuário carregue a aplicação só com o código necessário.

Podemos dizer adeus aos bugs com nomenclatura de classes, pois, o Styled gera nomes de classes únicos para os estilos, então, nos livramos de qualquer tipo de conflito.

Fora que a manutenção é muito mais fácil com o Styled Components, eliminando aquela dor de cabeça de caçar classes e IDs por toda a aplicação. Visto isso, parece uma boa o Styled Components. Que tal aplicarmos?

Com o Visual Studio aberto, o primeiro passo é instalar essa biblioteca no nosso projeto. Para isso, vamos abrir o terminal, vamos parar a aplicação que está rodando, e vamos rodar um comando para instalar essa biblioteca.

Se você estiver usando npm, pode dar um npm install --save styled-components. Mas, se você estiver usando o yarn, basta dar um yarn at save styled-components.

Agora que estamos instalando, voltaremos quando já estiver pronto.

Styled Components - Primeiro componente

Agora que temos tudo certo com a instalação da biblioteca, podemos aplicar os estilos nos nossos componentes.

Vamos começar com o componente tittle ou título, pois, ele é o componente mais simples da nossa aplicação.

A primeira coisa que temos que fazer é a importação default do Styled Components. Para isso, vamos dar um import styled from ‘styled-components’ no início do código do arquivo index.jsx.

E vamos criar, agora, o nosso componente estilizado. Vamos criar const Titulo = styled.; quando damos esse styled ponto, temos acesso à todos os tags HTMLs disponíveis para estilizar.

Neste caso, vamos usar a tag h1, mas, pode ser uma digy, pode ser um spam, uma image, dentre outras.

Para aplicarmos esses estilos, vamos usar a sintaxe de template literals com o uso do acento grave ou backticks, em inglês.

Certo. Abrimos backticks e agora podemos colocar o nosso código CSS. Mas, que código CSS?

Estamos usando essa classe de título, então, se viermos em estilos.css temos o color: grey e o padding: 25px. Podemos copiar essa informação, ou cortar, e vamos voltar para o Titulo. Vamos colar na constante de Titulo e vamos salvar.

Já podemos checar no browser, se salvarmos esses estilos; temos um erro, mas, por que ele acontece?

Temos um erro de redeclaração de variável, ou seja, temos dois títulos nesse componente. Se comentarmos o Titulo que está logo abaixo ao que incluímos o estilo, e salvar; está recompilando; podemos ver que aquele erro sumiu e o nosso título está aparecendo no browser.

Podemos, também, comentar esse React, pois, não estamos mais utilizando o React. O estilo copiado para a primeira constante de Titulo é apenas para estilização e podemos ter ele num arquivo que exporta apenas esse Titulo estilizado, pois, o Styled Components entende que a tag h1 vai receber um conteúdo vindo do children, do componente pie. Logo, podemos focar, apenas, na estilização desse componente.

Se viermos no arquivo Container do index.jsx, vemos que estamos passando ‘Fulano’ como children. No browser vemos o resultado do nosso parágrafo estilizado.

Se abrirmos o inspecionador, clicando com o botão direito do mouse em cima de qualquer parte da tela do navegador e selecionando a opção “Inspecionador”, podemos ver que temos uma nomenclatura de classe estranha.

Essa nomenclatura é gerada automaticamente pelo Styled Components, afim de evitar os conflitos com nomes de classes iguais.

Agora que já aplicamos o nosso componente estilizado , podemos voltar ao Visual Studio Code, no arquivo de Titulo do index.jsx, e remover a segunda constante de Titulo e, também, ir no arquivo estilos.css e remover a classe Titulos, que não vamos utilizar mais.

Sobre o curso React: abstraindo seu CSS com Styled Components

O curso React: abstraindo seu CSS com Styled Components possui 87 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas