Stylingmuligheder i React

React håndhæver ikke én bestemt metode til at style komponenter. I stedet giver det fleksibilitet til at vælge, hvordan styles anvendes, afhængigt af projektets behov.

Styling i React er stadig baseret på CSS. Forskellen ligger i hvordan styles organiseres og anvendes på komponenter.

I dette kursus fokuseres der på to centrale stylingmetoder:

• Inline styles: styles anvendes direkte på elementer ved hjælp af attributten style og JavaScript-objekter;
• Eksterne CSS-filer: styles skrives i traditionelle CSS-filer og anvendes ved hjælp af klassenavne.

Styling med biblioteker og frameworks

I virkelige projekter styles React-applikationer ofte ved hjælp af tredjepartsbiblioteker og frameworks. Nogle populære muligheder inkluderer:

• CSS Modules;
• Styled Components;
• Emotion;
• Tailwind CSS;
• Material UI (MUI);
• Chakra UI.

Disse værktøjer tilbyder avancerede funktioner såsom afgrænsede styles, design systems og utility-baseret styling.

Hvorfor vi ikke dækker dem her

Selvom de er kraftfulde, tilføjer styling-biblioteker yderligere kompleksitet og introducerer nye begreber ud over kerne-React. I dette kursus er målet at opbygge et solidt fundament, forstå hvordan React-komponenter fungerer og undgå unødvendige distraktioner i starten.