Použitie globálneho CSS pri štýľovaní v Reacte

Predpokladajme, že máme React komponent App, v ktorom je div, a vnútri divu - tri odseky:

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

Poďme naštýlovať tento komponent. Pre to, v rovnakej priečinku src s našim komponentom vytvoríme obyčajný CSS súbor so štýlmi styles.css pre naše elementy.

V tomto súbore pre div vytvoríme triedu class1 so štýlmi:

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

Teraz pridajme triedu class2 so štýlmi pre prvý odsek:

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

Triedu class3 so štýlmi pre druhý odsek:

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

A nakoniec vytvoríme triedu class4 pre posledný odsek:

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

S CSS súborom sme skončili. Ostáva aplikovať naše CSS štýly, ktoré sme napísali pre elementy. Vráťme sa k nášmu súboru App.js s komponentom.

Prvá vec, ktorú musíme nevyhnutne urobiť - pridať na začiatok súboru riadok importu nášho súboru štýlov styles.css:

App.jsimport './styles.css';

Teraz, aby sme aplikovali v komponente CSS triedy zo súboru, použijeme atribút class. Pre prvý odsek sme mali triedu class2, aplikujme ju:

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

Podobným spôsobom pridáme triedy pre zvyšné elementy. Vo výsledku dostaneme nasledujúci kód:

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