Gebruik van globale CSS voor stijlen in React

Stel, we hebben een React-component App, waarin een div staat, en binnen de div - drie paragrafen:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Laten we deze component stijlen. Hiervoor maken we, in dezelfde map src als onze component, een gewoon CSS-bestand met stijlen styles.css voor onze tags.

In dit bestand maken we voor de div een klasse class1 met stijlen:

styles.css.class1 {
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
}

Nu voegen we een klasse class2 toe met stijlen voor de eerste paragraaf:

styles.css.class2 {
  color: orangered;
  font-weight: bold;
}

Klasse class3 met stijlen voor de tweede paragraaf:

styles.css.class3 {
  font-style: italic;
  color: brown;
}

En tenslotte maken we een klasse class4 voor de laatste paragraaf:

styles.css.class4 {
  background-color: orange;
  font-weight: bold;
  color: white;
}     

We zijn klaar met het CSS-bestand. Het enige dat overblijft is het toepassen van onze CSS-stijlen die we hebben geschreven voor de tags. Laten we terugkeren naar ons bestand App.js met de component.

Het eerste dat we absoluut moeten doen - is het toevoegen van een importregel van ons stijlbestand styles.css bovenaan het bestand:

App.jsimport './styles.css';

Nu, om de CSS-classes uit het bestand toe te passen in de component, gebruiken we het attribuut class. Voor de eerste paragraaf hadden we de klasse class2, laten we deze toepassen:

App.js<p class="class2">text</p>

Op een vergelijkbare manier voegen we klassen toe voor de overige tags. Als resultaat krijgen we de volgende code:

App.js<div class="class1">
  <p class="class2">text</p>
  <p class="class3">text</p>
  <p class="class4">text</p>
</div>