Question 1

O que é um CSS Module no React?

Accepted Answer

CSS Modules geram automaticamente nomes de classes únicos adicionando um hash ao nome da classe, o que evita conflitos de estilos entre componentes. Cada arquivo CSS Module tem seu próprio escopo local, ao contrário das folhas de estilo globais tradicionais. Essa abordagem permite escrever estilos modulares sem o risco de sobrescritas acidentais em outros componentes.

Question 2

Qual é a principal vantagem do styled-components?

Accepted Answer

Styled-components permite escrever CSS diretamente em arquivos JavaScript usando template literals, o que facilita a criação de estilos dinâmicos baseados nas props do componente. Essa abordagem elimina o mapeamento manual entre classes CSS e componentes, e garante que apenas os estilos dos componentes montados sejam injetados na página. A colocalização dos estilos com a lógica do componente também melhora a manutenibilidade do código.

Question 3

Como importar um CSS Module em um componente React?

Accepted Answer

Para importar um CSS Module, use a sintaxe de importação padrão do JavaScript com um nome de arquivo terminando em .module.css, e atribua o resultado a uma variável que conterá um objeto com os nomes de classes transformados. Por convenção, essa variável é frequentemente chamada de 'styles'. As classes podem então ser aplicadas via o atributo className usando notação de objeto. Essa abordagem garante que os nomes de classes sejam únicos e com escopo do componente.

Styling & CSS-in-JS

O que é um CSS Module no React?

Resposta

Qual é a principal vantagem do styled-components?

Resposta

Como importar um CSS Module em um componente React?

Resposta

Qual é a característica principal do Tailwind CSS?

Qual é a principal desvantagem dos estilos inline no React?

Outros temas de entrevista React / Next.js

Fundamentos de JavaScript

Fundamentos do React

React Hooks

Ciclo de vida dos componentes

React Router

Gerenciamento de estado com Context

Formulários e Controlled Components

Busca de dados e API

React Query (TanStack Query)

Fundamentos do Next.js

TypeScript com React

Data Fetching no Next.js

Server Actions do Next.js

Roteamento e Navegação no Next.js

API Routes do Next.js

Metadata & SEO no Next.js

Middleware e Auth no Next.js

Testes em React

Zustand State Management

Otimização de Performance React

Error Boundaries & Error Handling

Advanced React Patterns

Recursos avançados do Next.js

Deploy e Produção com Next.js

Architecture & Design Patterns

React Server Components

Internacionalização do Next.js

React Security & Boas Práticas

Domine React / Next.js para sua proxima entrevista