Bendrojo CSS naudojimas stilizuojant React

Tarkime, kad turime React komponentą App, kuriame yra div, o viduje div - trys pastraipos:

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

Stilizuokime šį komponentą. Tam toje pačioje aplanke src su savo komponentu sukursime paprastą CSS failą su stiliais styles.css savo žymėms.

Šiame faile div sukursime klasę class1 su stiliais:

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

Dabar pridėkime klasę class2 su stiliais pirmai pastraipai:

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

Klasę class3 su stiliais antrai pastraipai:

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

Ir, galiausiai, sukurkime klasę class4 paskutinei pastraipai:

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

Baigėme su CSS failu. Belieka pritaikyti savo CSS stilius, kuriuos parašėme žymėms. Grįžkime prie savo failo App.js su komponentu.

Pirmas dalykas, kurį privalome padaryti - pridėti failo pradžioje savo stilių failo importo eilutę styles.css:

App.jsimport './styles.css';

Dabar, kad komponente pritaikytume CSS klases iš failo, naudosime atributą class. Pirmai pastraipai mes turėjome klasę class2, pritaikykime ją:

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

Panašiai pridėkime klases likusioms žymėms. Rezultate gausime šį kodą:

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