# Styling & CSS-in-JS (React / Next.js) > CSS Modules, styled-components, Tailwind CSS, estilos inline, theming - 18 perguntas de entrevista - Mid-Level - [Perguntas de entrevista: React / Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista.md) ## 1. O que é um CSS Module no React? **Resposta** 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. ## 2. Qual é a principal vantagem do styled-components? **Resposta** 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. ## 3. Como importar um CSS Module em um componente React? **Resposta** 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. ## Mais 15 perguntas disponiveis - Qual é a característica principal do Tailwind CSS? - Qual é a principal desvantagem dos estilos inline no React? Cadastre-se gratis: https://sharpskill.dev/pt/login ## Outros temas de entrevista React / Next.js - [Fundamentos de JavaScript](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/javascript-essentials.md): 25 perguntas, Junior - [Fundamentos do React](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-fundamentals.md): 20 perguntas, Junior - [React Hooks](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-hooks.md): 22 perguntas, Junior - [Ciclo de vida dos componentes](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/component-lifecycle.md): 18 perguntas, Junior - [React Router](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-router.md): 20 perguntas, Junior - [Gerenciamento de estado com Context](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/state-management-context.md): 18 perguntas, Junior - [Formulários e Controlled Components](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/forms-controlled-components.md): 20 perguntas, Mid-Level - [Busca de dados e API](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/fetching-data-api.md): 20 perguntas, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-query-tanstack.md): 20 perguntas, Mid-Level - [Fundamentos do Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-fundamentals.md): 25 perguntas, Mid-Level - [TypeScript com React](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/typescript-react.md): 20 perguntas, Mid-Level - [Data Fetching no Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-data-fetching.md): 24 perguntas, Mid-Level - [Server Actions do Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-server-actions.md): 20 perguntas, Mid-Level - [Roteamento e Navegação no Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-routing-navigation.md): 22 perguntas, Mid-Level - [API Routes do Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-api-routes.md): 20 perguntas, Mid-Level - [Metadata & SEO no Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-metadata-seo.md): 18 perguntas, Mid-Level - [Middleware e Auth no Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-middleware-auth.md): 22 perguntas, Mid-Level - [Testes em React](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-testing.md): 20 perguntas, Mid-Level - [Zustand State Management](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/zustand-state-management.md): 18 perguntas, Mid-Level - [Otimização de Performance React](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-performance-optimization.md): 22 perguntas, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-error-boundaries.md): 18 perguntas, Senior - [Advanced React Patterns](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/advanced-react-patterns.md): 20 perguntas, Senior - [Recursos avançados do Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-advanced-features.md): 24 perguntas, Senior - [Deploy e Produção com Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-deployment-production.md): 20 perguntas, Senior - [Architecture & Design Patterns](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-architecture-patterns.md): 22 perguntas, Senior - [React Server Components](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-server-components.md): 26 perguntas, Senior - [Internacionalização do Next.js](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/nextjs-internationalization.md): 20 perguntas, Senior - [React Security & Boas Práticas](https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/react-security-best-practices.md): 22 perguntas, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/pt/technologies/react-next/perguntas-entrevista/styling-css-in-js