Hoewel inline stijlen handig zijn voor kleine of dynamische stijlen, vertrouwen de meeste echte applicaties op externe CSS-bestanden. Deze aanpak houdt stijlen gescheiden van de componentlogica en maakt ze eenvoudiger te beheren naarmate projecten groeien.

React ondersteunt externe CSS standaard. Je kunt reguliere CSS schrijven en deze toepassen op componenten met behulp van klassenamen, net als in traditionele webontwikkeling.

Een extern CSS-bestand aanmaken

Maak eerst een CSS-bestand aan en definieer je stijlen:

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

Dit CSS-bestand bevat een eenvoudige klasse die hergebruikt kan worden in verschillende componenten.

CSS importeren in een component

Om de stijlen te gebruiken, importeer je het CSS-bestand in je componentbestand:

import "./styles.css";

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

In React wordt het attribuut class geschreven als className, omdat class een gereserveerd trefwoord is in JavaScript.

Hoe externe CSS werkt in React

CSS-bestanden worden standaard globaal toegepast. Elke component kan een klasse gebruiken die is gedefinieerd in een geïmporteerd CSS-bestand. Stijlen gedragen zich op dezelfde manier als in standaard HTML en CSS. Dit maakt externe CSS vertrouwd en eenvoudig te gebruiken, vooral voor ontwikkelaars met een achtergrond in traditionele webontwikkeling.

Wanneer externe CSS gebruiken

Externe CSS is een goede keuze wanneer:

• Stijlen gedeeld worden tussen meerdere componenten;
• Layouts complexer worden;
• Je een duidelijke scheiding wilt tussen structuur en opmaak.

Voor grotere projecten zorgt externe CSS vaak voor schonere en beter onderhoudbare code.