Het gebruik van een CSS-bestand om React-componenten te stylen vindt zijn oorsprong in de traditionele HTML-CSS-structuur. Hier volgt een stapsgewijze handleiding over hoe een CSS-bestand kan worden gebruikt om React-componenten te stylen:

1. Een CSS-bestand aanmaken

Maak om te beginnen een apart CSS-bestand met de extensie .css. Dit bestand kan zich in dezelfde map als de component bevinden of in een speciale map voor stijlen, waarin alle CSS-bestanden samen zijn georganiseerd.

Voorbeeld:

2. Het CSS-bestand importeren

Gebruik de 'import'-instructie om CSS-bestanden te importeren in het componentbestand. Plaats deze import-instructie bovenaan het componentbestand. Geef binnen de aanhalingstekens '' het juiste bestandspad op.

Voorbeeld:

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

Als het CSS-bestand zich in de map styles bevindt, heeft de import-instructie de volgende syntax:

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

Opmerking

Gebruik de punt-en-slash-notatie ./ om een bestand binnen dezelfde map te verwijzen. Om een bestand buiten de huidige map te benaderen en naar de bovenliggende map te navigeren, gebruik twee punten en een slash ../.

3. Stijlen toepassen op de component

Zodra de stijlen zijn geïmporteerd, wordt de component zich bewust van de aanwezigheid van de CSS. Hierdoor kun je CSS-selectors en klassenamen gebruiken om de elementen te stijlen. Het enige verschil is dat in React-toepassingen het className-attribuut wordt gebruikt in plaats van het class-attribuut dat in HTML-bestanden wordt gebruikt.

Voorbeeld:

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

Nu kunnen we de CSS-klassen container, title en description gebruiken om de elementen binnen de Block-component te stijlen.

Styling toevoegen

Op dit punt kunnen we het CSS-bestand openen en stijlen toepassen op de gedefinieerde klassenamen. Bijvoorbeeld, het index.css-bestand kan de volgende stijlen bevatten:

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

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

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

Door deze stappen te volgen, worden de in het CSS-bestand gedefinieerde stijlen toegepast op de overeenkomstige elementen in de React-component.

Volledige app-code: