React CSS modullari

CSS modullari sizga ma’lum bir componentga lokal ravishda kiritilgan CSS-ni yozish imkonini beradi.

Bu CSS class nomlari ziddiyatlarini oldini oladi va uslublaringizni yanada barqaror qiladi.

CSS modullari nima?

React-da CSS modullari bu CSS-fayllar bo‘lib, ularda class nomlari sukut bo‘yicha lokal ravishda qamrab olinadi.

CSS fayli .module.css kengaytmasiga ega bo‘lishi kerak va uni React fayl(lar)ingizga import qilib ishlatish mumkin.

CSS modulini yaratish

Keling, Button.module.css deb nomlangan CSS modulini yarataylik, bu yerda biz ba’zi tugmalarni shakllantiramiz.

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

CSS modulidan foydalanish

Componentingizda CSS modulini import qiling va foydalaning:

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={styles.mybutton}>
        My Button
      </button>
    </div>
  );
}

Misol tushuntirildi

• Biz uslublar obyektini CSS modulidan import qilamiz
• mybutton sinfiga kirish uchun styles.mybutton dan foydalanamiz
• Tugmaning haqiqiy klass nomi noyob bo‘ladi (masalan, _mybutton_q1obu_1)

Bir nechta classlar

Yuqoridagi misolda biz faqat bitta sinfdan foydalandik, lekin keling, ko‘proq sinflarni qo‘shamiz:

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

O‘zgarishlarni namoyish qilish uchun har birida ikkita sinfdan iborat ikkita tugma bo‘lishi kerak:

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={`${styles.mybutton} ${styles.primary}`}>
        My Primary Button
      </button>
      <button className={`${styles.mybutton} ${styles.secondary}`}>
        My Secondary Button
      </button>
    </div>
  );
}

Kompozitsiya darslari

CSS modullari composes kalit so‘zidan foydalangan holda sinflarni birlashtirishga imkon beradi:

Bu shuni anglatadiki, bir class boshqa sinfning uslublarini meros qilib olishi mumkin.

Oldingi misol uchun ikkalasi ham primary va secondary sinflari mybutton sinfining uslublariga bog‘liq.

Buni primary va secondary sinflariga composes: mybutton qo‘shish orqali amalga oshirish mumkin:

.mybutton {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  composes: mybutton;
  background-color: #007bff;
  color: white;
}

.secondary {
  composes: mybutton;
  background-color: #6c757d;
  color: white;
}

Endi primary dan foydalanish kifoya. va componentdagi secondary sinflari:

import styles from './Button.module.css';

function App() {
  return (
    <div>
      <button className={styles.primary}>
        Primary Button
      </button>
      <button className={styles.secondary}>
        Secondary Button
      </button>
    </div>
  );
}

Global classlar

CSS modullaridan foydalanganda .module.css faylidagi classlar faqat ularni import qiluvchi componentda ishlatilishi mumkin. Bu class nomiga fayl nomining xeshi va noyob identifikator bilan prefiks qo‘yish orqali amalga oshiriladi. Turli fayllarda bir xil class nomidan foydalanish xavfsiz, chunki nomlar noyob bo‘ladi.

Biroq, ba’zida siz sinflaringiz butun dunyo bo‘ylab mavjud bo‘lishini xohlaysiz va ularni boshqa componentlarda ishlatasiz.

Buni :global sintaksisi bilan qilishingiz mumkin:

:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

:global wrapper sinfni hamma uchun mavjud qiladi.

U oddiygina .myheader deb ataladi va prefikssiz va _myheader_q1obu_1 kabi noyob identifikator qo‘shiladi.

Siz uni quyidagi kabi componentlaringizda ishlatishingiz mumkin:

import styles from './BlueHeader.module.css';

function App() {
  return (
    <div>
      <h1 className="myheader">
        My Header
      </h1>
    </div>
  );
}

Global va mahalliy sinflarni birlashtiring

Siz global va mahalliy sinflarni bir xil CSS modulida birlashtira olasiz:

:global(.myheader) {
  padding: 10px 20px;
  font-size: 50px;
  color: white;
  background-color: dodgerblue;
}

.myparagraph {
  font-size: 20px;
  color: white;
  background-color: purple;
}

Quyidagi kabi componentlaringizda foydalaning:

import styles from './MyStyles.module.css';

function App() {
  return (
    <div>
      <h1 className="myheader">
        My Header
      </h1>
      <p className={styles.myparagraph}>
        My Paragraph
      </p>
    </div>
  );
}