CSS no JavaScript: Aprendendo a usar styled-components
Um tutorial básico pra 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 pra aprender a tecnologia, mas a procrastinação sempre vence, dessa vez resolvi colocar a mão na massa e aprender na marra.
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 no projeto ao invés 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 enquanto 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.
Então, 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';
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>
);
Simples, né? É por que é 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 CSS o mais enxuto possível, pra não ficar um componente gigantesco com CSS desnecessário. Pesquise, estude CSS, é 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;
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;
Você deve ter notado que é possível usar media queries da mesma forma que nos pré-processadores.
Também dá pra 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;
}
`;
Bom, eu quis passar o básico para você aprender a usar styled-components no seu projeto. Ainda tem muitas coisas legais pra aprender ali, mas já dá pra 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á.
