React - Estilização

Estilização em react pode ser feita de algumas formas, cada uma possui suas vantagens e desvantagens, no artigo vamos abordar as formas básicas sem uso de bibliotecas.

O código do exemplo é obter o resultado abaixo:

CSS Puro

É possível estilizar com arquivos .css de forma global ou em componentes com estilizações específicas, isso pode melhorar a manutenção porém podemos ter problemas de especificidade do css em aplicações maiores.

Exemplo simples do uso de CSS Puro

/* styles.css */
.container {
  max-width: 800px;
  width: 100vw;
  height: 100vh;

  margin: 0 auto;
  font-family: 'Roboto', sans-serif;

  background-color: #2F3D40;
  color: #f5f5f5;

  padding: 16px;
}

.article-title {
  text-align: left;

  font-size: 1.2rem;
}

.paragraph {
  background-color: #3D5A73;
  padding: 12px;

  line-height: 1.5;
  border-radius: 6px;

  word-wrap: wrap;
}

Criamos um arquivo styles.css separado do componente, que pode estar em um pasta específica para estilos ou junto no mesmo diretório do arquivo do componente.

Para que esses estilos sejam definido no componente precisamos primeiro realizar a importação e adicionar no atributo className do JSX as classes criadas com as regras css.

Exemplo de uso no componente

import React from "react";

import "./styles.css";

export const StylesExample = () => {
  return (
    <div className="container">
      <h2 className="article-title">Article title</h2>
      <p className="paragraph">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

CSS Modules

Outra forma de realizar estilização em React é via css modules, para utilizarmos criamos um arquivo com extensão .module.css e esse quando importando retorna um objeto com as classes definidas no módulo, utilizamos de forma parecida com css puro, porém por se tratar de um objeto adicionamos com {} no atributo className.

Essas classes são transformadas em classes únicas no build, o que torna o css com escopo local, isso resolve problemas relacionados a conflitos na estilização.

Exemplo com a utilização de CSS Modules

...
import styles from "./styles.module.css";

export const StylesExample = () => {
  return (
    <div className={styles.container}>
      <h2 className={styles.article_title}>Article title</h2>
      <p className={styles.paragraph}>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

O arquivo de css é igual ao anterior com a exceção de não ser possível utilizar hífen na criação das classes css pois essas serão transformadas em propriedades de objeto, nesse caso podemos utilizar _ ou camelCase.

CSS Inline

Podemos utilizar o atributo style dos elementos para utilizar css inline, para isso passamos um objeto com as regras css utilizando camelCase.

...
export const StylesExample = () => {
  return (
    <div
      style={{
        maxWidth: "800px",
        width: "100vw",
        height: "100vh",

        margin: "0 auto",
        fontFamily: "'Roboto', sans-serif",

        backgroundColor: "#2F3D40",
        color: "#f5f5f5",

        padding: "16px",
      }}
    >
      <h2
        style={{
          textAlign: "left",
          fontSize: "1.2rem",
        }}
      >
        Article title
      </h2>
      <p
        style={{
          backgroundColor: " #29383b",
          padding: "12px",

          lineHeight: 1.5,
          borderRadius: "6px",

          wordWrap: "wrap",
        }}
      >
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit odio
        voluptates omnis, molestiae ad doloremque dicta eveniet natus numquam
        impedit id, nam deleniti sint asperiores iure quam nobis eos a. Lorem
        ipsum dolor sit amet consectetur adipisicing elit. Sit odio voluptates
        omnis, molestiae ad doloremque dicta eveniet natus numquam impedit id,
        nam deleniti sint asperiores iure quam nobis eos a. Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Sit odio voluptates omnis,
      </p>
    </div>
  );
};

É possível criar um objeto fora do componente e inserir no style semelhante ao css modules, porém essa é a forma menos usada e aqui esta apenas como mais uma forma de uso.

Geralmente em React usamos outras formas de estilização quando estamos falando de grandes aplicações e os mais comum são o conceito de CSS in JS como styled components e bibliotecas de estilização como tailwindCSS entre outras.

Veja também : O que são módulos CSS e por que precisamos deles? | Estilização em React | As 5 melhores libs de UI para React | by Maycon Alves - Medium

_{Este post tem como objetivo ajudar quem esta começando no aprendizado de React, além de servir como incentivo no meus estudos de React criando outros posts pra fixação do aprendizado.}

Me paga um ☕ ? | pix: nascimento.dev.io@gmail.com

Me Sigam :)

Github | Linkedin

Blog

React - Estilização

Jorge Nascimento

CSS Puro

CSS Modules

CSS Inline

Me Sigam :)

Join Our Newsletter. No Spam, Only the good stuff.

Related