Iniciando com Styled Components

Componentes estilizados

Componentes estilizados são uma das novas maneiras de usar CSS no JavaScript moderno. Ele pretende ser um sucessor dos Módulos CSS, uma maneira de escrever CSS com escopo definido para um único componente e não vazar para nenhum outro elemento da página.

O Styled Components

O Styled Components é hoje umas das bibliotecas mais utilizadas para estilização de componentes.

Com o Styled Components podemos escrever componentes estilizados com CSS simples e sem nos preocupar com colisões de nomes de classes. E pra ser bem franco com você, eu já sofri muito com colisão de classes quando eu ainda utilizada estilização em arquivos .css.

Instalação

Faça a instalação dessa biblioteca utilizando npm ou yarn.

yarn add styled-components
ou
npm install styled-components

É isso ai! A instalação é tão simples quanto parece.

Primeiro componente estilizado

No seu projeto, agora faça a importação e comece a escrever seus componentes. Neste post estou utilizando para ReactJs mas pode ser utilizado em React Native.

// import para ReactJs
import styled from 'styled-components';

// import para React Native
import styled from 'styled-components/native';

Agora escreva seu componente. Simples assim:

const Header = styled.header`
  height: 80px;
  width: 100%;
  display: flex;
  justify-content:  space-between;
  background-color: #808080;
`;

Header agora é um componente React com tudo que se tem direito.

Nós o criamos usando uma função do objeto estilizado, chamado styled.headerneste caso, e passando algumas propriedades CSS em template literal .

Agora, esse componente pode ser renderizado como um componente React qualquer.

Estou construindo diretamente no nosso App.js para ficar mais fácil de entender, mas o ideal é separá-los em um outro arquivo. Seu arquivo deve estar parecido com esse:

import React from 'react';

import styled from 'styled-components';

const Header = styled.header`
  height: 80px;
  width: 100%;
  display: flex;
  justify-content:  space-between;
  background-color: #808080;
`;

function App() {
  return (
    <div>
      <Header/>     
    </div>
  );
}

export default App;

Se você chegou até aqui, já deve estar conseguindo visualizar o resultado lá no seu navegador. 😍

Assim como uma header, você pode criar componentes para button, h1, input, div e muito outros.

Props para customizar os componentes

Agora imagine que você deseja passar para o componente Header a cor dele por uma prop. Isso é possível sem complicação alguma.

const Header = styled.header`
  height: 80px;
  width: 100%;
  display: flex;
  justify-content:  space-between;
  background-color: ${props => props.color};
`;

function App() {
  return (
    <div>
      <Header color='#f00'/>     
    </div>
  );
}

Agora, nosso componente Header terá a cor que for passada na prop color. Testou aí? Legal, não é mesmo!?😎

CSS que você já conhece

Componentes escritos utilizando Styled Components utilizam CSS comum. Não é pseudo CSS nem CSS embutido com suas limitações. Veja um exemplo mais complexo:

const Header = styled.header`
  height: 80px;
  width: 100%;
  display: flex;
  justify-content:  space-between;
  background-color: ${props => props.color};
  @media (max-weight:650px) {
      height: 60px;
  }

  &:hover {
    background-color: #0f0;
  }
`;

Concluindo

É isso aí para a introdução dos componentes com estilo! Esses conceitos ajudarão você a entender o conceito e a trabalhar com essa maneira de usar CSS em JavaScript.

Se quiser, pode fazer o download do exemplo criado nesse post aqui no repositório do GitHub.

Ficou com dúvida? deixa nos comentários..
Grande abraço, até o próximo post!