Коришћење глобалног CSS-a при стилизацији у React-у

Претпоставимо да имамо React компоненту App, у којој постоји div, а унутар tог div-a - три параграфа:

App.jsfunction App() {
  return (
    <div>
      <p>текст</p>
      <p>текст</p>
      <p>текст</p>
    </div>
  );
}

Хајде да стилизујемо ову компоненту. За то, у истој фасцикли src са нашом компонентом креирајмо обичан CSS фајл са стиловима styles.css за наше тагове.

У овом фајлу за div креирајмо класу class1 са стиловима:

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

Сада додајмо класу class2 са стиловима за први параграф:

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

Класу class3 са стиловима за други параграф:

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

И, коначно, креирајмо класу class4 за последњи параграф:

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

Са CSS фајлом смо завршили. Остаје да применимо наше CSS стилове, које смо написали за тагове. Вратимо се нашем фајлу App.js са компонентом.

Прво, што морамо обавезно да урадимо - да додамо на почетак фајла линију за увоз нашег фајла са стиловима styles.css:

App.jsimport './styles.css';

Сада, да би применили у компоненти CSS класе из фајла, искористимо атрибут class. За први параграф нам је била класа class2, примењујмо је:

App.js<p class="class2">текст</p>

На сличан начин додајмо класе за преостале тагове. Као резултат добијамо следећи код:

App.js<div class="class1">
  <p class="class2">текст</p>
  <p class="class3">текст</p>
  <p class="class4">текст</p>
</div>