CSS no JavaScript: Aprendendo a usar styled-components

Em:

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 n arquivo

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

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

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

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

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á.

  • Adeus Flash e um viva aos open standards

    Nesta semana a Adobe anuncinou oficialmente o fim do Flash. No final de 2020 o Flash não será mais atualizado e nem distruibuído.

  • A stack BrazilJS

    Começar algo do zero é tão divertido quanto é complicado, e foi bem assim que montamos o ambiente para rodar as aplicações que hoje formam uma pseudo-plataforma BrazilJS. Neste post vou tentar listar tudo o que foi feito e como foi feito para subir o CMS BrazilJS, o Blog BrazilJS e mais umas pequenas ferramentas. […]

  • Gerenciamento de variáveis de ambiente

    As variáveis de ambiente ajudam a definir valores que não queremos codificar diretamente em nosso código fonte. Variáveis que nos permitem personalizar o comportamento do código, dependendo do ambiente no qual ele está sendo ou será executado.

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup