Bruk av global CSS for styling i React

Anta at vi har en React-komponent App som inneholder en div, og inni div-en - tre avsnitt:

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

La oss style denne komponenten. For å gjøre dette, i samme mappe src som vår komponent, skal vi opprette en vanlig CSS-fil med stiler styles.css for våre tagger.

I denne filen skal vi for div-en opprette en klasse class1 med stiler:

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

Nå legger vi til klassen class2 med stiler for det første avsnittet:

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

Klassen class3 med stiler for det andre avsnittet:

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

Og til slutt oppretter vi klassen class4 for det siste avsnittet:

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

Vi er ferdige med CSS-filen. Det som gjenstår er å bruke våre CSS-stiler som vi skrev for taggene. La oss gå tilbake til vår fil App.js med komponenten.

Det første vi absolutt må gjøre - er å legge til en import-setning for vår stilfil styles.css på toppen av filen:

App.jsimport './styles.css';

Nå, for å bruke i komponenten CSS-klassene fra filen, bruker vi attributtet class. For det første avsnittet hadde vi klassen class2, la oss bruke den:

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

På samme måte legger vi til klasser for de andre taggene. Som et resultat får vi følgende kode:

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