Brug af global CSS til styling i React

Antag, at vi har en React-komponent App, som indeholder en div, og inde i div'en - tre afsnit:

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

Lad os style denne komponent. For at gøre dette, i den samme mappe src med vores komponent, opretter vi en almindelig CSS-fil med styles styles.css til vores tags.

I denne fil, for div'en, opretter vi en klasse class1 med styles:

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

Nu tilføjer vi klassen class2 med styles til det første afsnit:

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

Klasse class3 med styles til det andet afsnit:

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

Og endelig opretter vi klassen class4 til det sidste afsnit:

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

Vi er færdige med CSS-filen. Tilbage står at anvende vores CSS-styles, som vi har skrevet til tagsene. Lad os vende tilbage til vores fil App.js med komponenten.

Den første ting, vi absolut skal gøre - er at tilføje en import-sætning for vores stilfil styles.css i toppen af filen:

App.jsimport './styles.css';

Nu, for at anvende CSS-klasserne fra filen i komponenten, bruger vi attributten class. For det første afsnit havde vi klassen class2, lad os anvende den:

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

På samme måde tilføjer vi klasser for de resterende tags. Som resultat får vi følgende kode:

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