반응 - 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 퓨로

É 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.

간단한 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 파스타 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 class criadas com as regras css.

구성요소가 없는 사용 예

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 모듈

CSS 모듈을 통해 React é를 현실화하고 확장.module.css을 클래스로 가져오려면 모듈을 정의하지 않고 객체를 가져와야 합니다. utilizamos de forma parecida com css puro, porém por se tratar de um com{} 속성 className이 없습니다.

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

CSS 모듈 활용 예

...
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>
  );
};

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

CSS 인라인

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 module, porém essa é a forma menos usada e aqui esta apenas como mais uma forma de uso.

React는 JS comostyled components 및 como como의 bibliotecastailwindCSS에 있는 CSS를 더 많이 사용할 수 있습니다.

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.}

나 시감 :)

Github |