Использовании глобального CSS при стилизации в React

Предположим, у нас есть React компонент App, в котором есть див, а внутри дива - три абзаца:

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

Давайте стилизуем этот компонент. Для этого, в той же папке src с нашим компонентом создадим обычный CSS файл со стилями styles.css для наших тегов.

В этом файле для дива создадим класс 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>