Styling & CSS-in-JS
CSS Modules, styled-components, Tailwind CSS, estilos en línea, theming
1¿Qué es un CSS Module en React?
¿Qué es un CSS Module en React?
Respuesta
Los CSS Modules generan automáticamente nombres de clases únicos añadiendo un hash al nombre de la clase, lo que previene conflictos de estilos entre componentes. Cada archivo CSS Module tiene su propio scope local, a diferencia de las hojas de estilo globales tradicionales. Este enfoque permite escribir estilos modulares sin riesgo de sobreescrituras accidentales en otros componentes.
2¿Cuál es la principal ventaja de styled-components?
¿Cuál es la principal ventaja de styled-components?
Respuesta
Styled-components permite escribir CSS directamente en archivos JavaScript usando template literals, lo que facilita la creación de estilos dinámicos basados en las props del componente. Este enfoque elimina el mapeo manual entre clases CSS y componentes, y garantiza que solo los estilos de los componentes montados se inyecten en la página. La colocalización de estilos con la lógica del componente también mejora la mantenibilidad del código.
3¿Cómo importar un CSS Module en un componente React?
¿Cómo importar un CSS Module en un componente React?
Respuesta
Para importar un CSS Module, usa la sintaxis de importación estándar de JavaScript con un nombre de archivo que termine en .module.css, y asigna el resultado a una variable que contendrá un objeto con los nombres de clases transformados. Por convención, esta variable suele llamarse 'styles'. Las clases pueden aplicarse luego mediante el atributo className usando notación de objeto. Este enfoque garantiza que los nombres de clases sean únicos y de alcance del componente.
¿Cuál es la característica principal de Tailwind CSS?
¿Cuál es la principal desventaja de los estilos en línea en React?
+15 preguntas de entrevista
Otros temas de entrevista React / Next.js
Fundamentos de JavaScript
Fundamentos de React
React Hooks
Ciclo de vida de los componentes
React Router
Gestión de estado con Context
Formularios y Controlled Components
Obtención de datos y API
React Query (TanStack Query)
Fundamentos de Next.js
TypeScript con React
Data Fetching en Next.js
Server Actions de Next.js
Routing y Navegación en Next.js
API Routes de Next.js
Metadata & SEO en Next.js
Middleware y Auth en Next.js
Testing en React
Zustand State Management
Optimización de Rendimiento en React
Error Boundaries & Error Handling
Advanced React Patterns
Características avanzadas de Next.js
Despliegue y Producción de Next.js
Architecture & Design Patterns
React Server Components
Internacionalización de Next.js
React Security & Buenas Prácticas
Domina React / Next.js para tu próxima entrevista
Accede a todas las preguntas, flashcards, tests técnicos, ejercicios de code review y simuladores de entrevista.
Empieza gratis