Styling & CSS-in-JS
CSS Modules, styled-components, Tailwind CSS, inline styles, theming
1What is a CSS Module in React?
What is a CSS Module in React?
Answer
CSS Modules automatically generate unique class names by adding a hash to the class name, which prevents style conflicts between components. Each CSS Module file has its own local scope, unlike traditional global stylesheets. This approach allows writing modular styles without the risk of accidental overrides in other application components.
2What is the main advantage of styled-components?
What is the main advantage of styled-components?
Answer
Styled-components allows writing CSS directly in JavaScript files using template literals, which facilitates creating dynamic styles based on component props. This approach eliminates manual mapping between CSS classes and components, and ensures that only styles from mounted components are injected into the page. Collocating styles with component logic also improves code maintainability.
3How to import a CSS Module in a React component?
How to import a CSS Module in a React component?
Answer
To import a CSS Module, use the standard JavaScript import syntax with a filename ending in .module.css, and assign the result to a variable that will contain an object with the transformed class names. By convention, this variable is often named 'styles'. Classes can then be applied via the className attribute using object notation. This approach ensures that class names are unique and scoped to the component.
What is the main characteristic of Tailwind CSS?
What is the main disadvantage of inline styles in React?
+15 interview questions
Other React / Next.js interview topics
JavaScript Essentials
React Fundamentals
React Hooks
Component Lifecycle
React Router
State Management with Context
Forms & Controlled Components
Data Fetching & API
React Query (TanStack Query)
Next.js Fundamentals
TypeScript with React
Next.js Data Fetching
Next.js Server Actions
Next.js Routing & Navigation
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testing
Zustand State Management
React Performance Optimization
Error Boundaries & Error Handling
Advanced React Patterns
Next.js Advanced Features
Next.js Deployment & Production
Architecture & Design Patterns
React Server Components
Next.js Internationalization
React Security & Best Practices
Master React / Next.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free