Stile Komponenter med Ekstern CSS

Selv om inline-stiler er nyttige for små eller dynamiske tilpasninger, benytter de fleste reelle applikasjoner eksterne CSS-filer. Denne tilnærmingen holder stilene adskilt fra komponentlogikken og gjør dem enklere å håndtere etter hvert som prosjektene vokser.

React støtter eksterne CSS-filer direkte. Du kan skrive vanlig CSS og bruke det på komponenter ved hjelp av klassenavn, akkurat som i tradisjonell webutvikling.

Opprette en ekstern CSS-fil

Opprett først en CSS-fil og definer stilene dine:

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

Denne CSS-filen inneholder en enkel klasse som kan gjenbrukes på tvers av komponenter.

Importere CSS i en komponent

For å bruke stilene, importer CSS-filen i komponentfilen din:

import "./styles.css";

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

I React skrives attributtet class som className fordi class er et reservert nøkkelord i JavaScript.

Hvordan ekstern CSS fungerer i React

CSS-filer brukes globalt som standard. Enhver komponent kan bruke en klasse definert i en importert CSS-fil. Stiler oppfører seg på samme måte som i vanlig HTML og CSS. Dette gjør ekstern CSS kjent og enkel å bruke, spesielt for utviklere med bakgrunn fra tradisjonell webutvikling.

Når bruke ekstern CSS

Ekstern CSS er et godt valg når:

• Stiler deles mellom flere komponenter;
• Oppsett blir mer komplekse;
• Du ønsker et tydelig skille mellom struktur og stil.

For større prosjekter gir ekstern CSS ofte renere og mer vedlikeholdbar kode.