Selvom inline-stilarter er nyttige til små eller dynamiske tilpasninger, benytter de fleste reelle applikationer eksterne CSS-filer. Denne tilgang holder stilarter adskilt fra komponentlogik og gør dem lettere at administrere, efterhånden som projekter vokser.

React understøtter eksterne CSS-filer direkte. Du kan skrive almindelig CSS og anvende den på komponenter ved hjælp af klassenavne, ligesom i traditionel webudvikling.

Oprettelse af en ekstern CSS-fil

Opret først en CSS-fil og definer dine stilarter:

/* styles.css */
.title {
  font-size: 32px;
  font-weight: 700;
  color: rebeccapurple;
}

Denne CSS-fil indeholder en simpel klasse, der kan genbruges på tværs af komponenter.

Import af CSS i en komponent

For at anvende stilarterne importeres CSS-filen i din komponentfil:

import "./styles.css";

const App = () => (
  <>
    <h1 className="title">App title</h1>
  </>
);

I React skrives attributten class som className, da class er et reserveret nøgleord i JavaScript.

Sådan fungerer ekstern CSS i React

CSS-filer anvendes som standard globalt. Enhver komponent kan bruge en klasse, der er defineret i en importeret CSS-fil. Stilarter opfører sig på samme måde som i standard HTML og CSS. Dette gør ekstern CSS velkendt og nem at bruge, især for udviklere med baggrund i traditionel webudvikling.

Hvornår skal ekstern CSS bruges

Ekstern CSS er et godt valg, når:

• Stilarter deles på tværs af flere komponenter;
• Layouts bliver mere komplekse;
• Du ønsker en tydelig adskillelse mellem struktur og styling.

For større projekter fører ekstern CSS ofte til renere og mere vedligeholdelig kode.