CSS-и глобалиро дар React барои услубидан истифода бурдан

Фарз мекунем, ки мо компоненти React App дорем, ки дар он як див ва дар дохили он див - се абзац мавҷуд аст:

App.jsfunction App() {
  return (
    <div>
      <p>матн</p>
      <p>матн</p>
      <p>матн</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">матн</p>

Ба ҳамин монанд барои тегҳои боқимонда низ синфҳоро илова мекунем. Дар натиҷа рамзи зеро ба даст меорем:

App.js<div class="class1">
  <p class="class2">матн</p>
  <p class="class3">матн</p>
  <p class="class4">матн</p>
</div>