16

Como você usa o CSS nos seus componentes em React?

#ReactJS #JavaScript #CSS
Aline Bastos
Aline Bastos

File:React Native Logo.png - Wikimedia Commons



Existem várias opções diferentes para definir o estilo dos componentes em React. Tudo depende de suas preferências pessoais ou da empresa, e da complexidade específica de sua aplicação.

Se você deseja adicionar apenas algumas propriedades de estilo, o estilo inline é a melhor opção.

Quando você deseja reutilizar suas propriedades de estilo, ou quando seu aplicativo é mais complexo, é mais produtivo utilizar folhas de estilo, CSS Modules, pré processadores CSS (Sass, SCSS, Less, etc.), styled-components ou Stylable.



Componentização e estilos


O conceito de componentização tem sido cada vez mais utilizado e, por consequência, muitas das diferentes opções para estilizar as aplicações vêm surgindo com o objetivo de deixar os componentes de uma aplicação web mais independentes.


Como citado, a componentização nada mais é do que o processo de quebrar o código da sua aplicação em pedaços menores, independentes entre si, facilitando assim a sua (re)utilização e a manutenção. Não há maneira certa nem errada de se fazer isso, tudo depende do seu projeto.


Essa abordagem tem vários benefícios:


  • Facilidade na hora de testar a aplicação
  • Facilidade de reutilização do código
  • Facilidade para dar manutenção
  • Facilidade para identificar e remover código sem uso


Agora, quando paramos para pensar em qual seria a melhor maneira de estilizar esses componentes, temos algumas opções:


  • CSS Inline
  • Folhas de Estilo
  • CSS Modules
  • Pré Processadores CSS
  • Styled-components
  • Stylable


A seguir, vamos explorar cada uma das formas de usar o CSS embutido nos componentes utilizando o React como base dos nossos componentes.



CSS Inline


Exemplo de CSS Inline:


Podemos criar uma variável que armazena propriedades de estilo e depois passá-la para o elemento:


import React from 'react';

const divStyle = {  
  margin: '40px',  
  border: '5px solid pink'
};

const pStyle = {  
  fontSize: '15px',  
  textAlign: 'center'
};

const Box = () => (  
  <div style={divStyle}>    
    <p style={pStyle}>CSS Inline</p>  
  </div>)
);

export default Box;


Também podemos passar o estilo diretamente:


import React from 'react';

const Box = () => (  
  <div style={{color: 'pink'}}>    
    <p style={{textAlign: 'center'}}>CSS Inline</p>  
  </div>)
);

export default Box;


Um dos problemas que enfrentamos ao utilizar CSS inline, como mostrado no exemplo acima, é que você não terá acesso a determinados recursos nativos do CSS, como pseudo-selectors, pseudo-elements, media queries, keyframe animations, entre outros. Além disso, pode acabar sendo mais difícil estilizar as tags html e body utilizando esse recurso.


Uma questão a ser observada é que o navegador gasta mais tempo com a renderização do CSS nos scripts, pois precisa mapear todas as regras de estilos passadas para o componente, sendo que a renderização com regras reais do CSS é muito mais rápida.



Folhas de Estilo


Uma forma de usar o CSS dentro de componentes React é o tradicional import de um arquivo externo CSS que concentra todas as regras de estilo.


import React from 'react';
import './Box.css';

const Box = () => (
  <div className="Box">
    <p className="Box_text">Folhas de Estilo</p>
  </div>
);

export default Box;


Como pode ser verificado no exemplo acima, basta importar o arquivo css ‘./Box.css’ para que seja possível ter um arquivo CSS separado para cada componente.


Essa é a forma mais comum de utilização em qualquer aplicação, seja em React ou outro tipo de framework, e que mantém seus arquivos CSS independentes dos códigos HTML e JavaScript, além de não ter a necessidade de nenhuma instalação ou configuração.



CSS Modules


Um Módulo CSS é um arquivo CSS no qual todos os nomes de classe e nomes de animação têm escopo local por padrão.


import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (  
  <div className={styles.container}>    
    <p className={styles.content}>CSS Módules</p>  
  </div>
);

export default DashedBox;


Similar ao CSS, nós importamos o arquivo DashedBox.css, então acessamos a className como acessamos o objeto.


:local(.container) {   
  margin: 40px;   
  border: 5px dashed pink; 
};

:local(.content) {   
  font-size: 15px;   
  text-align: center; 
};


:local(.className) - quando você usa o create-react-app, por causa das configurações do webpack.


.className - se você usar o seu próprio react boilerplate.


Para fazer os CSS Modules funcionarem com o Webpack, você só precisa incluir os módulos mencionados acima e adicionar o seguinte loader ao arquivo webpack.config.js:


{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}



Pré Processadores CSS


Sass & SCSS


É um pré-processador CSS que permite o uso de variáveis, nesting, partials, imports e functions, que adicionam superpowers ao CSS regular. O objetivo é tornar o processo de codificação mais simples e eficiente.


$font-family: 'Open Sans', sans-serif;
$primary-color: #333;

body {
  font: 100% $font-family;
  color: $primary-color;
}


Saiba mais sobre como usar e instalar o Sass com uma variedade de linguagens de programação em sua documentação oficial Sass: Syntactically Awesome Style Sheets


Less


Less (Leaner Style Sheets) é um pré-processador, open source, de folhas de estilo, que pode ser compilado em CSS e executado no lado do cliente ou no lado do servidor. Ele se inspira em CSS e Sass, e é semelhante ao SCSS. Algumas diferenças notáveis incluem variáveis que começam com o sinal @ em Less e com $ em Sass.


@font-family: 'Roboto', sans-serif;
@primary-color: #4D926F;

body {
  color: @primary-color;
  font: 100% @font-family;
}



Styled-Components


Styled-components é uma biblioteca para React e React Native que permite que você use estilos em nível de componente em sua aplicação. Esses estilos são escritos com uma mistura de JavaScript e CSS.


Com styled-components é possível utilizar media queries de forma similar à que utilizamos com pré-processadores. Sem contar que também é possível utilizar elementos aninhados, pseudo-elements, inclusive estilizar as tags html e body.


É só colocar o código CSS no mesmo arquivo ou pasta do seu componente, tornando-o dessa forma completamente independente e desacoplado do restante da aplicação, o que pode ser uma excelente vantagem.


Primeiro precisamos instalar a library: 

npm install styled-components --save


Agora nós podemos criar uma variável, selecionando um elemento HTML em particular, onde armazenaremos nossos estilos:


import React from 'react';
import styled from 'styled-components';

const MainDiv = styled.div`
  color: pink;
`

const Paragraph = styled.p`
  text-align: center;
`

const Box = () => (
  <MainDiv>
    <Paragraph>styled-components</Paragraph>
  </MainDiv>
);

export default Box;



Stylable


Se você não é o maior fã de CSS-in-JS, então o Stylable pode ser para você. É um pré-processador que permite que você defina estilos de componentes para que eles não vazem e entrem em conflito com outros estilos em outras partes da sua aplicação. Ele vem com vários recursos úteis — como a capacidade de definir pseudo-classes personalizadas — para que você possa aplicar estilos aos seus componentes com base no estado. Também é inspirado no TypeScript, com a página inicial do projeto informando:


Nós também ♥ TypeScript. O TypeScript nos ajuda a gerenciar esses grandes projetos, expondo em tempo de build o que podíamos ver apenas uma vez em tempo de execução.Queremos dar ao CSS um sistema de tipos - fazer para o CSS o que o TypeScript faz para o JavaScript.


Quando se trata de integrar o Stylable ao React, eles oferecem um guia prático. Há também o projeto create-stylable-app, que inicializará um aplicativo da web baseado em React com Stylable como solução de estilo.


No momento do build, o pré-processador converte o Stylable CSS em um CSS simples, estático e válido, que funciona em vários navegadores.


@namespace "Example1";

/* Todo Stylable CSS tem uma classe reservada chamada root
que corresponde ao root node do component. */
.root {
  -st-states: toggled, loading;
};

.root:toggled { 
  color: red; 
};

.root:loading { 
  color: green; 
};

.root:loading:toggled { 
  color: blue; 
};


/* CSS output*/
.Example1__root.Example1--toggled { 
  color: red; 
};

.Example1__root.Example1--loading { 
  color: green; 
};

.Example1__root.Example1--loading.Example1--toggled { 
  color: blue; 
};


Stylable tem muito mais a oferecer. A documentação oficial de introdução fornece uma explicação detalhada.


Conclusão


Lembre-se de que, no final, não existe maneira certa ou errada de estilizar os componentes. Realmente depende de como você trabalha, das ferramentas que usa e de entender o que você realmente está tentando alcançar.


Espero que este artigo tenha sido útil para você!


E você? Tem alguma preferência ao usar estilos em projetos ReactJS?


Sinta-se à vontade para comentar 🙃

9
230

Comentários (9)

1
Abraão Santos

Abraão Santos

19/01/2021 12:52

uau, mas oque foi isso, não é todo dia que da pra encontrar esse tipo de conteúdo por ai, vou salvar aqui, parabéns pelo tópico.

1
A

ALINE VIEIRA

13/01/2021 00:46

Muito bom.

1
Donizete Barbosa

Donizete Barbosa

12/01/2021 23:56

Excelente artigo vai ajudar bastante!

1
Eline Pimentel

Eline Pimentel

12/01/2021 23:17

Gratidão por compartilhar tanto conhecimento, Aline !

1
Carolline Souza

Carolline Souza

12/01/2021 14:53

Artigo maravilhoso!!! Estou começando a estudar React e essa leitura leve me ajudou bastante!

1
Asafe Camilo

Asafe Camilo

12/01/2021 14:30

Muito top, e estou estudando exatamente isso!!! Muito bom conteúdo

1
Ana Goulart

Ana Goulart

12/01/2021 14:30

Ótimo artigo, Aline! Muito obrigada por compartilhar esse conteúdo!!

1
Victor Correia

Victor Correia

12/01/2021 16:28

Artigo excelente!

1
R

Rodrigo Almeida

12/01/2021 10:42

Excelente conteúdo. Salvei pra consultar no futuro. 🤩

Front-End Software Engineer

Brasil