Globaalin CSS:n käyttö React-komponenttien tyylittelyssä

Oletetaan, että meillä on React-komponentti App, jossa on div, ja divin sisällä kolme kappaletta:

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

Tyylitellään tämä komponentti. Tehdään tätä varten samaan kansioon src komponenttimme kanssa tavallinen CSS-tiedosto tyyleille styles.css elementeillemme.

Tässä tiedostossa luodaan diville luokka class1 tyyleillä:

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

Lisätään nyt luokka class2 tyyleillä ensimmäiselle kappaleelle:

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

Luokka class3 tyyleillä toiselle kappaleelle:

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

Ja lopuksi luodaan luokka class4 viimeiselle kappaleelle:

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

CSS-tiedoston kanssa olemme valmiit. Jäljelle jää vain soveltaa CSS-tyylimme, jotka kirjoitimme elementeille. Palataan tiedostoomme App.js komponentin kanssa.

Ensimmäinen asia, joka meidän on ehdottomasti tehtävä - lisätä tiedoston alkuun tyylitiedostomme styles.css tuontirivi:

App.jsimport './styles.css';

Nyt, jotta voitaisiin soveltaa komponentissa CSS-luokkia tiedostosta, käytetään attribuuttia class. Ensimmäiselle kappaleelle meillä oli luokka class2, sovelletaan sitä:

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

Lisätään vastaavasti luokat lopuille elementeille. Tuloksena saamme seuraavan koodin:

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