React-та элементтерді стильдеу кезінде жаһандық CSS қолдану

Бізде React компоненті App бар делік, оның ішінде div бар, ал div ішінде - үш абзац:

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

Ұқсас әдіспен қалған тегтер үшін кластарды қосамыз. Нәтижеде келесі кодты аламыз:

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