CSS Modules

Última atualização: 2026-11-03

CSS Modules CSS Modules

Os CSS Modules transformam um arquivo CSS comum em estilos com escopo local: no momento da build cada nome de classe é compilado em um identificador único no formato fileName_className_hash, então os componentes ficam naturalmente isolados e a poluição global de estilos desaparece. No React você os referencia através de um objeto styles.xxx, o que torna o isolamento de estilos uma solução de custo zero para projetos médios e grandes. Nada extra é necessário em tempo de execução.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

/* No install needed — Vite / Create React App support it out of the box */
/* Button.module.css — the file name must end with .module.css */
.title { color: #0969da; }
.active { color: #1a7f37; }

// Button.jsx — class names are referenced through the styles object
import styles from './Button.module.css'

export default function Button() {
  return <button className={styles.title}>Button</button>
}
// styles.title compiles to 'Button_title_x7s2k2', globally unique and conflict-free

Retorna：Sem valor de retorno — CSS Modules é uma solução em tempo de build; veja a sintaxe e o exemplo para aprender a usá-lo.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Simulação: a demo mostra primeiro os nomes de classe hash compilados de styles.card e styles.title, depois renderiza um card abaixo. Ao clicar no botão Activate title, o nome de classe hash active é adicionado ao título e ele fica azul. Em um projeto real, esses nomes de classe hash recebem seus estilos de um arquivo .module.css.

💡 Pontos-chave

🏷️ Mais Ecossistema

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós