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