Reactда стиллашда глобал CSSдан фойдаланиш

Фарз қилайлик, бизда 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 атрибутидан foydalanamiz. Биринчи абзац учун бизда 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>