Como você usa o CSS nos seus componentes em React?
- #React
- #JavaScript
- #CSS
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 🙃
