Brugen af en CSS-fil til at style React-komponenter stammer fra den traditionelle HTML-CSS-struktur. Her er en trinvis vejledning i, hvordan en CSS-fil kan anvendes til at style React-komponenter:

1. Opret en CSS-fil

Start med at oprette en separat CSS-fil med filendelsen .css. Denne fil kan placeres i samme mappe som komponenten eller i en dedikeret mappe specifikt til styles, hvor alle CSS-filer er organiseret samlet.

Eksempel:

2. Importér CSS-filen

Brug 'import'-sætningen til at importere CSS-filer i komponentfilen. Placer denne import-sætning øverst i komponentfilen. Angiv den korrekte filsti inden for anførselstegnene ''.

Eksempel:

// Import the CSS file
import './index.css';

Hvis CSS-filen ligger i mappen styles, vil import-sætningen have følgende syntaks:

// Import the CSS file from a folder
import './styles/index.css';

Bemærk

Brug punktum og skråstreg-notationen ./ for at referere til en fil i samme mappe. For at tilgå en fil uden for den aktuelle mappe og navigere til overliggende mappe, anvendes to punktummer og en skråstreg ../.

3. Anvendelse af styles på komponenten

Når stilarterne er importeret, bliver din komponent opmærksom på CSS'ens tilstedeværelse. Derfor kan du anvende CSS-selektorer og klassenavne til at style elementerne. Den eneste forskel er, at i React-applikationer anvender vi attributten className i stedet for attributten class, som bruges i HTML-filer.

Eksempel:

const Block = () => (
  <div className="container">
    <h1 className="title">Heading</h1>
    <p className="description">Description</p>
  </div>
);

Nu kan vi bruge CSS-klasserne container, title og description til at style elementerne i Block-komponenten.

Tilføj styling

På dette tidspunkt kan vi åbne CSS-filen og anvende styles på de definerede klassenavne. For eksempel kan index.css-filen indeholde følgende styles:

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.title {
  color: blue;
  font-size: 24px;
}

.description {
  color: green;
  font-size: 16px;
}

Ved at følge disse trin vil vi anvende de styles, der er defineret i CSS-filen, på de tilsvarende elementer i React-komponenten.

Fuld app-kode: