Выкарыстанне глабальнага 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>