CSS no JavaScript: Aprendendo a usar styled-components

Um tutorial básico para quem está iniciando no mundo do CSS no JavaScript e quer dar uma conferida nessa ferramenta.

Resolvi entrar de cabeça no desenvolvimento frontend da nova plataforma de mentoria do Training Center. O desenvolvimento da plataforma seria com React no frontend e, como eu estou sempre lutando para aprender a tecnologia, mas a procrastinação sempre vence, resolvi colocar a mão na massa e aprender na marra dessa vez.

A primeira issue era simples: a criação do header da plataforma (com o logo), um link para cadastro e outro link para login. Vamos lá!

Depois de uma boa pesquisa, criei o componente para o header, criei a home, arrumei as rotas e coloquei o código JSX (html) no header.

Então, fui me preocupar com uma sugestão dada no início do projeto sobre usar styled-components em vez do CSS separado do HTML/JS.

Resolvi, então, pesquisar sobre o tal styled-components. Achei uma documentação bem boa no próprio site deles, mas ainda fiquei com algumas dúvidas que fui sanando à medida que fazia e testava.

O interessante do styled-components é que você vai colocar o código CSS no mesmo arquivo do seu componente, componentizando (desculpa a redundância) o CSS também. No caso do header que eu criei, no mesmo arquivo ficaram a estrutura HTML e os estilos, deixando o componente completamente independente.

Depois desse papo todo, vamos ao que interessa - CSS no JS!

Vou partir do pressuposto que quem vai tentar este tutorial já tem tudo instalado no seu computador e já tem um projeto em React iniciado, ok?

Caso você não tenha um projeto iniciado e queira testar o componente, instale o create-react-app. É bem simples de instalar, não precisa saber configurar webpack nem nada do tipo, e é criado um projeto em React bem simples e enxuto, pronto para o uso.

Instalação

Pelo terminal, vá até o seu projeto, e digite

npm install --save styled-components

Dê enter, claro, e espere terminar a instalação, que é bem rápida.

O styled-components está instalado no seu projeto e pronto para ser usado!

Vamos lá!

Agora, temos que chamar o componente no arquivo onde você for usá-lo

import styled from 'styled-components';

Importando o styled-components no arquivo

Feito. Styled-components pronto para ser usado no seu arquivo!

Agora, vamos estilizar a tag header para testar.

const Head = styled.header`   display: flex;   align-items: center;   justify-content: space-between;   padding: 5px 30px;   background-color: #f4f4f5;   box-shadow: 0 0 5px 0 #999; `; const Header = () => (   <Head>     <span>teste header</p>   </Head> ); 

Usando styled-components na tag header

Simples, né? É porque é simples mesmo!

Você vai criar uma const com o nome desejado - sempre o mais descritivo possível, claro - e vai seguir esse padrão de atribuir a const ao styled.tagqueeuqueroestilizar. No caso, styled.header, pois é a tag header que eu quero estilizar.

Tente usar um código CSS o mais enxuto possível para não ficar um componente gigantesco com CSS desnecessário. Pesquise, estude CSS - esse é o meu conselho. ;)

Se você quiser ter alguns estilos mais gerais, que vão ser usados em vários componentes, você pode criar um componente com esse estilo e importar onde você precisar.

import React from 'react'; import styled from 'styled-components'; const Container = styled.div`   padding: 0 10px;   @media (min-width: 1020px) {    max-width: 1000px;    margin: 0 auto;   } `; export default Container; 

Criando o componente Container

import React from 'react'; import styled from 'styled-components'; import Header from 'client/src/features/Header'; import Container from 'client/src/components/Container'; const Home = () => (   <div>     <Header />     <main>       <Container> </Container>     </main>   </div> ); export default Home; 

Importando o componente Container

Você deve ter notado que é possível usar media queries da mesma forma que nos pré-processadores. Também dá para usar nested e pseudo elements.

const SocialLink = styled(Link)`     text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);   color: #0C1624;   font-size: 26px;   margin-left: 20px;   &:hover {     color: #d33837;   } `; 

Nested elements e pseudo elements no styled-components

Bem, eu quis passar o básico para você aprender a usar styled-components no seu projeto. Ainda tem muitas coisas legais para aprender ali, mas já dá para fazer muita coisa com esse conhecimento básico. De qualquer forma, tem tudo - desde o mais básico até o mais avançado - na documentação deles. Dá uma conferida lá.