Globālā CSS izmantošana stilošanā React

Pieņemsim, ka mums ir React komponents App, kurā ir div, un divā - trīs rindkopas:

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

Iztērēsim šo komponentu. Lai to izdarītu, tajā pašā mapē src ar mūsu komponentu izveidosim parastu CSS failu ar stiliem styles.css mūsu atlasēm.

Šajā failā div izveidosim klasi class1 ar stiliem:

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

Tagad pievienosim klasi class2 ar stiliem pirmajai rindkopai:

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

Klasī class3 ar stiliem otrajai rindkopai:

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

Un, visbeidzot, izveidosim klasi class4 pēdējai rindkopai:

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

Ar CSS failu mēs esam pabeiguši. Atlika piemērot mūsu CSS stilus, kurus mēs uzrakstījām atlases. Atgriezīsimies pie mūsu faila App.js ar komponentu.

Pirmā lieta, kas mums obligāti jādara - jāpievieno faila sākumā importa rinda mūsu stila failam styles.css:

App.jsimport './styles.css';

Tagad, lai komponentā piemērotu CSS klases no faila, izmantosim atribūtu class. Pirmajai rindkopai mums bija klase class2, piemērosim to:

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

Līdzīgi pievienosim klases pārējām atlases. Rezultātā iegūsim sekojošu kodu:

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