Користење на глобален CSS при стилизирање во React

Да претпоставиме, имаме React компонента App, во која има div, а внатре во div-от - три параграфи:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</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">text</p>

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

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