Použití globálního CSS pro stylování v Reactu

Předpokládejme, že máme React komponentu App, ve které je div a uvnitř divu - tři odstavce:

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

Pojďme tuto komponentu nastylovat. K tomu, ve stejné složce src s naší komponentou vytvoříme obyčejný CSS soubor se styly styles.css pro naše značky.

V tomto souboru pro div vytvoříme třídu class1 se styly:

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

Nyní přidáme třídu class2 se styly pro první odstavec:

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

Třídu class3 se styly pro druhý odstavec:

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

A nakonec vytvoříme třídu class4 pro poslední odstavec:

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

S CSS souborem jsme skončili. Zbývá aplikovat naše CSS styly, které jsme napsali pro značky. Vraťme se k našemu souboru App.js s komponentou.

První, co musíme určitě udělat - přidat na začátek souboru řádek importu našeho souboru stylů styles.css:

App.jsimport './styles.css';

Nyní, abychom aplikovali v komponentě CSS třídy ze souboru, použijeme atribut class. Pro první odstavec jsme měli třídu class2, aplikujme ji:

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

Podobným způsobem přidáme třídy pro zbývající značky. Ve výsledku dostaneme následující kód:

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