# Styling & CSS-in-JS (React / Next.js) > CSS Modules, styled-components, Tailwind CSS, stili inline, theming - 18 domande da colloquio - Mid-Level - [Domande da colloquio: React / Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio.md) ## 1. Cos'è un CSS Module in React? **Risposta** I CSS Modules generano automaticamente nomi di classe unici aggiungendo un hash al nome della classe, il che previene i conflitti di stili tra componenti. Ogni file CSS Module ha il proprio scope locale, a differenza dei tradizionali fogli di stile globali. Questo approccio consente di scrivere stili modulari senza il rischio di sovrascritture accidentali in altri componenti. ## 2. Qual è il principale vantaggio di styled-components? **Risposta** Styled-components consente di scrivere CSS direttamente nei file JavaScript usando template literals, il che facilita la creazione di stili dinamici basati sulle props del componente. Questo approccio elimina la mappatura manuale tra classi CSS e componenti e garantisce che solo gli stili dei componenti montati vengano iniettati nella pagina. La colocalizzazione degli stili con la logica del componente migliora anche la manutenibilità del codice. ## 3. Come importare un CSS Module in un componente React? **Risposta** Per importare un CSS Module, usa la sintassi di importazione JavaScript standard con un nome file che termina in .module.css e assegna il risultato a una variabile che conterrà un oggetto con i nomi di classe trasformati. Per convenzione, questa variabile è spesso chiamata 'styles'. Le classi possono poi essere applicate tramite l'attributo className usando la notazione a oggetti. Questo approccio garantisce che i nomi di classe siano unici e con scope del componente. ## Altre 15 domande disponibili - Qual è la caratteristica principale di Tailwind CSS? - Qual è lo svantaggio principale degli stili inline in React? Registrati gratis: https://sharpskill.dev/it/login ## Altri argomenti di colloquio React / Next.js - [Fondamenti di JavaScript](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/javascript-essentials.md): 25 domande, Junior - [Fondamenti di React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-fundamentals.md): 20 domande, Junior - [React Hooks](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-hooks.md): 22 domande, Junior - [Ciclo di vita dei componenti](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/component-lifecycle.md): 18 domande, Junior - [React Router](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-router.md): 20 domande, Junior - [Gestione dello state con Context](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/state-management-context.md): 18 domande, Junior - [Form e Controlled Components](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/forms-controlled-components.md): 20 domande, Mid-Level - [Recupero dati e API](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/fetching-data-api.md): 20 domande, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-query-tanstack.md): 20 domande, Mid-Level - [Fondamentali di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-fundamentals.md): 25 domande, Mid-Level - [TypeScript con React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/typescript-react.md): 20 domande, Mid-Level - [Data Fetching in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-data-fetching.md): 24 domande, Mid-Level - [Server Actions di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-server-actions.md): 20 domande, Mid-Level - [Routing e Navigazione in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-routing-navigation.md): 22 domande, Mid-Level - [API Routes di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-api-routes.md): 20 domande, Mid-Level - [Metadata & SEO in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-metadata-seo.md): 18 domande, Mid-Level - [Middleware e Auth in Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-middleware-auth.md): 22 domande, Mid-Level - [Testing React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-testing.md): 20 domande, Mid-Level - [Zustand State Management](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/zustand-state-management.md): 18 domande, Mid-Level - [Ottimizzazione delle Performance React](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-performance-optimization.md): 22 domande, Senior - [Error Boundaries & Error Handling](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-error-boundaries.md): 18 domande, Senior - [Advanced React Patterns](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/advanced-react-patterns.md): 20 domande, Senior - [Funzionalità avanzate di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-advanced-features.md): 24 domande, Senior - [Deploy e Produzione con Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-deployment-production.md): 20 domande, Senior - [Architecture & Design Patterns](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-architecture-patterns.md): 22 domande, Senior - [React Server Components](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-server-components.md): 26 domande, Senior - [Internazionalizzazione di Next.js](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/nextjs-internationalization.md): 20 domande, Senior - [React Sicurezza & Best Practices](https://sharpskill.dev/it/technologies/react-next/domande-colloquio/react-security-best-practices.md): 22 domande, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/it/technologies/react-next/domande-colloquio/styling-css-in-js