Използване на глобални 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>