Globális CSS használata stílusozáskor Reactben

Tegyük fel, hogy van egy React komponensünk App, amelyben van egy div, és a div-en belül három bekezdés:

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

Stílusozzuk meg ezt a komponenst. Ehhez, ugyanabban a src mappában, ahol a komponensünk van, készítsünk egy sima CSS fájlt styles.css a címkéink stílusához.

Ebben a fájlban a div-hez készítsünk egy class1 osztályt stílusokkal:

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

Most adjuk hozzá a class2 osztályt stílusokkal az első bekezdéshez:

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

class3 osztály stílusokkal a második bekezdéshez:

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

Végül készítsük el a class4 osztályt az utolsó bekezdéshez:

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

A CSS fájllal készen vagyunk. Már csak alkalmaznunk kell a CSS stílusainkat, amelyeket a címkékhez írtunk. Térjünk vissza a App.js fájlhoz a komponenssel.

Az első dolog, amit feltétlenül meg kell tennünk - hozzáadni a fájl elejéhez a stílusfájlunk styles.css importálását:

App.jsimport './styles.css';

Most, hogy a komponensben alkalmazhassuk a CSS osztályokat a fájlból, használjuk a class attribútumot. Az első bekezdéshez a class2 osztály tartozott, alkalmazzuk ezt:

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

Hasonló módon adjuk hozzá az osztályokat a többi címkéhez. Az eredmény a következő kód lesz:

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