# Styling & CSS-in-JS (React / Next.js) > CSS Modules, styled-components, Tailwind CSS, inline styles, theming - 18 interview questions - Mid-Level - [Interview Questions: React / Next.js](https://sharpskill.dev/en/technologies/react-next/interview-questions.md) ## 1. 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. ## 2. 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. ## 3. 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. ## 15 more questions available - What is the main characteristic of Tailwind CSS? - What is the main disadvantage of inline styles in React? Sign up for free: https://sharpskill.dev/en/login ## Other React / Next.js interview topics - [JavaScript Essentials](https://sharpskill.dev/en/technologies/react-next/interview-questions/javascript-essentials.md): 25 questions, Junior - [React Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-fundamentals.md): 20 questions, Junior - [React Hooks](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-hooks.md): 22 questions, Junior - [Component Lifecycle](https://sharpskill.dev/en/technologies/react-next/interview-questions/component-lifecycle.md): 18 questions, Junior - [React Router](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-router.md): 20 questions, Junior - [State Management with Context](https://sharpskill.dev/en/technologies/react-next/interview-questions/state-management-context.md): 18 questions, Junior - [Forms & Controlled Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/forms-controlled-components.md): 20 questions, Mid-Level - [Data Fetching & API](https://sharpskill.dev/en/technologies/react-next/interview-questions/fetching-data-api.md): 20 questions, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-query-tanstack.md): 20 questions, Mid-Level - [Next.js Fundamentals](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 questions, Mid-Level - [TypeScript with React](https://sharpskill.dev/en/technologies/react-next/interview-questions/typescript-react.md): 20 questions, Mid-Level - [Next.js Data Fetching](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 questions, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 questions, Mid-Level - [Next.js Routing & Navigation](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 questions, Mid-Level - [Next.js API Routes](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 questions, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 questions, Mid-Level - [Next.js Middleware & Auth](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 questions, Mid-Level - [React Testing](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-testing.md): 20 questions, Mid-Level - [Zustand State Management](https://sharpskill.dev/en/technologies/react-next/interview-questions/zustand-state-management.md): 18 questions, Mid-Level - [React Performance Optimization](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-performance-optimization.md): 22 questions, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-error-boundaries.md): 18 questions, Senior - [Advanced React Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 questions, Senior - [Next.js Advanced Features](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 questions, Senior - [Next.js Deployment & Production](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 questions, Senior - [Architecture & Design Patterns](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-architecture-patterns.md): 22 questions, Senior - [React Server Components](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-server-components.md): 26 questions, Senior - [Next.js Internationalization](https://sharpskill.dev/en/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 questions, Senior - [React Security & Best Practices](https://sharpskill.dev/en/technologies/react-next/interview-questions/react-security-best-practices.md): 22 questions, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/en/technologies/react-next/interview-questions/styling-css-in-js