Globaalse CSS-i kasutamine React-i stiilimisel

Oletame, et meil on React-i komponent App, milles on div, ja selle div-i sees on kolm lõigu:

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

Stiilime selle komponendi. Selleks loome samas kaustas src meie komponendiga tavalise CSS-faili stiilidega styles.css meie siltide jaoks.

Selles failis loome div-ile klassi class1 stiilidega:

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

Nüüd lisame klassi class2 koos stiilidega esimese lõigu jaoks:

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

Klassi class3 koos stiilidega teise lõigu jaoks:

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

Ja lõpuks loome klassi class4 viimase lõigu jaoks:

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

CSS-failiga on meil valmis. Jääb üle rakendada meie CSS-stiilid, mille me siltide jaoks kirjutasime. Pöördume tagasi meie faili App.js komponendiga.

Esimene asi, mida me peame tingimata tegema - lisada faili algusesse meie stiilifaili styles.css importimise rida:

App.jsimport './styles.css';

Nüüd, et rakendada komponendis CSS-klasse failist, kasutame atribuuti class. Esimese lõigu jaoks oli meil klass class2, rakendame seda:

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

Samamoodi lisame klassid ülejäänud siltidele. Tulemuseks saame järgmise koodi:

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