
Styling & CSS-in-JS
CSS Modules, styled-components, Tailwind CSS, inline styles, theming
1Wat is een CSS Module in React?
Wat is een CSS Module in React?
Antwoord
CSS Modules genereren automatisch unieke klassenamen door een hash aan de klassenaam toe te voegen, wat stijlconflicten tussen componenten voorkomt. Elk CSS Module-bestand heeft zijn eigen lokale scope, in tegenstelling tot traditionele globale stylesheets. Deze aanpak maakt het mogelijk modulaire stijlen te schrijven zonder het risico van onbedoelde overschrijvingen in andere componenten.
2Wat is het belangrijkste voordeel van styled-components?
Wat is het belangrijkste voordeel van styled-components?
Antwoord
Styled-components maakt het mogelijk CSS rechtstreeks in JavaScript-bestanden te schrijven met template literals, wat het eenvoudiger maakt dynamische stijlen te maken op basis van component-props. Deze aanpak elimineert handmatige mapping tussen CSS-klassen en componenten en zorgt ervoor dat alleen stijlen van gemounte componenten in de pagina worden geïnjecteerd. Het colloceren van stijlen met componentlogica verbetert ook de onderhoudbaarheid van code.
3Hoe importeer je een CSS Module in een React-component?
Hoe importeer je een CSS Module in een React-component?
Antwoord
Om een CSS Module te importeren, gebruik de standaard JavaScript-importsyntax met een bestandsnaam eindigend op .module.css en wijs het resultaat toe aan een variabele die een object met de getransformeerde klassenamen zal bevatten. Conventioneel wordt deze variabele vaak 'styles' genoemd. Klassen kunnen dan worden toegepast via het className-attribuut met behulp van objectnotatie. Deze aanpak zorgt ervoor dat klassenamen uniek en beperkt zijn tot de component.
Wat is het belangrijkste kenmerk van Tailwind CSS?
Wat is het belangrijkste nadeel van inline stijlen in React?
+15 gespreksvragen
Andere React / Next.js-sollicitatieonderwerpen
JavaScript-basisbegrippen
React-basisbegrippen
React Hooks
Componentlevenscyclus
React Router
Statusbeheer met Context
Formulieren & Controlled Components
Gegevens ophalen & API
React Query (TanStack Query)
Next.js Fundamentals
TypeScript met React
Next.js Data Fetching
Next.js Server Actions
Routing & Navigatie in Next.js
Next.js API Routes
Next.js Metadata & SEO
Next.js Middleware & Auth
React Testen
Zustand State Management
React Performance-optimalisatie
Error Boundaries & Error Handling
Advanced React Patterns
Geavanceerde Next.js-functies
Next.js Deployment & Productie
Architecture & Design Patterns
React Server Components
Next.js Internationalisering
React Beveiliging & Best Practices
Beheers React / Next.js voor je volgende gesprek
Krijg toegang tot alle vragen, flashcards, technische tests, code review-oefeningen en gespreksimulatoren.
Begin gratis