Estilização

React trabalha com class do mesmo modo que elementos HTML, porém, para evitar conflitos com a palavra reservada class do JavaScript, o React utiliza className.

O CSS aplicado vai funcionar da mesma forma, bem como a utilização de classes, ids, pseudo-classes e pseudo-elementos.

Exemplo

import "./style.css";

const Card = () => {
  return (
    <div className="card round">
      <h1>Card</h1>
    </div>
  );
};

export default Card;

.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.round {
  border-radius: 50%;
}

O mesmo pode ser feito inline, mas não é recomendado.

Pré-processadores como SASS, LESS e Stylus também podem ser utilizados, mas é necessário configurar o ambiente para que o React entenda.

Styled Components

O React possui uma biblioteca chamada Styled Components que permite escrever CSS dentro do JavaScript. Esse formato é chamado de CSS-in-JS. Traz diversas vantagens e pode ajudar basntate no dia-a-dia. Principalmente para passagem de variáveis, condicionais, sistemas que permitem estilização de tema, como plataformas White Label.

Exemplo

import styled from "styled-components";

const Wallet = () => {
  return (
    <ContainerStyled>
      <TitleStyled>Wallet</TitleStyled>
    </ContainerStyled>
  );
};

const ContainerStyled = styled.div`
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  padding: 16px;
`;

const TitleStyled = styled.h1`
  color: #000;
  font-size: 24px;
  font-weight: bold;
`;

export default Wallet;

info

A utilização do sufixo Styled não é regra, mas é uma boa prática para identificar que o componente é estilizado com Styled Components.