Գլոբալ CSS-ի օգտագործումը React-ում ոճավորելիս

Ենթադրենք, ունենք React կոմպոնենտ App, որի մեջ կա div, իսկ նրա ներսում երեք պարբերություն (paragraph).

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</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">text</p>

Նույն կերպ ավելացնենք դասերը մնացած տարրերի համար: Արդյունքում կստանանք հետևյալ կոդը.

App.js<div class="class1">
  <p class="class2">text</p>
  <p class="class3">text</p>
  <p class="class4">text</p>
</div>