Die gebruik van globale CSS vir stylering in React

Veronderstel ons het 'n React-komponent App, wat 'n div het, en binne die div - drie paragrawe:

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

Kom ons styl hierdie komponent. Vir hierdie doel, in dieselfde gids src met ons komponent, sal ons 'n gewone CSS-lêer skep met style styles.css vir ons etikette.

In hierdie lêer skep ons 'n klas class1 met style vir die div:

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

Laat ons nou die klas class2 byvoeg met style vir die eerste paragraaf:

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

Klas class3 met style vir die tweede paragraaf:

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

En uiteindelik, skep ons die klas class4 vir die laaste paragraaf:

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

Ons is klaar met die CSS-lêer. Dit bly net om ons CSS-style wat ons vir die etikette geskryf het, toe te pas. Kom ons gaan terug na ons lêer App.js met die komponent.

Die eerste ding wat ons absoluut moet doen - voeg aan die begin van die lêer 'n invoerstring by vir ons styl-lêer styles.css:

App.jsimport './styles.css';

Nou, om die CSS-klasse van die lêer in die komponent toe te pas, gebruik ons die attribuut class. Vir die eerste paragraaf het ons die klas class2 gehad, laat ons dit toepas:

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

Op 'n soortgelyke manier voeg ons klasse by vir die res van die etikette. As gevolg sal ons die volgende kode kry:

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