Używanie globalnego CSS do stylowania w React

Załóżmy, że mamy komponent React App, w którym znajduje się div, a wewnątrz diva - trzy akapity:

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

Ostylejmy ten komponent. W tym celu, w tym samym folderze src z naszym komponentem utwórzmy zwykły plik CSS ze stylami styles.css dla naszych znaczników.

W tym pliku dla diva utwórzmy klasę class1 ze stylami:

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

Teraz dodajmy klasę class2 ze stylami dla pierwszego akapitu:

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

Klasę class3 ze stylami dla drugiego akapitu:

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

I na koniec utwórzmy klasę class4 dla ostatniego akapitu:

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

Z plikiem CSS skończyliśmy. Pozostało zastosować nasze style CSS, które napisaliśmy dla znaczników. Wróćmy do naszego pliku App.js z komponentem.

Pierwsza rzecz, którą musimy koniecznie zrobić - dodać na początku pliku linię importu naszego pliku stylów styles.css:

App.jsimport './styles.css';

Teraz, aby zastosować w komponencie klasy CSS z pliku, użyjemy atrybutu class. Dla pierwszego akapitu mieliśmy klasę class2, zastosujmy ją:

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

W podobny sposób dodajmy klasy dla pozostałych znaczników. W rezultacie otrzymamy następujący kod:

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