React CSS-in-JS

CSS-in-JS nima?

CSS-in-JS - bu CSS-ni to‘g‘ridan-to‘g‘ri JavaScript kodingizga yozishingiz mumkin bo‘lgan uslublash usuli.

Ushbu yondashuv sizga quyidagilarga imkon beradi:

• JavaScript yordamida CSS-ni yozing
• Componentlar miqyosidagi uslublarni yarating
• Propslarga asoslangan dinamik uslublardan foydalaning
• CSS class nomlari bilan ziddiyatlardan saqlaning

Ishni boshlash

CSS-in-JS React asosiy kutubxonasining bir qismi emas, lekin Vite, Webpack yoki Create React App kabi ko‘plab React qurish vositalari yordamida o‘rnatilishi mumkin.

styled-components’ni o‘rnatish uchun quyidagi buyruqni ishga tushiring:

Endi siz bevosita .jsx fayllaringizga CSS yozishni boshlashingiz mumkin:

import styled from 'styled-components';

const MyHeader = styled.h1`
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
`;

function App() {
  return (
    <>
      <MyHeader>Welcome!</MyHeader>
    </>
  );
}

CSS-in-JS bo‘lmasa, sizga quyidagilar kerak bo‘ladi:

• CSS-ni alohida .css fayliga yozing va uni React componentlaringizga import qiling
• Inline uslublaridan foydalaning

E’tibor bering:

• Componentlarni yaratish uchun biz styled obyektidan foydalanamiz
• Stillar template literallar (backtick’lar) ichida yoziladi
• Oddiy CSS sintaksisidan foydalanishingiz mumkin

Uslubli componentlardagi props

CSS-in-JS-ning yana bir kuchli xususiyati bu uslublarni dinamik qilish uchun propslardan foydalanish qobiliyatidir.

Keling, bitta asosiy va ikkinchi darajali ikkita tugma mavjud bo‘lgan misol yarataylik.

Biz ularning fon rangini btntype prop qiymatiga asoslamoqchimiz:

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: ${props => props.btntype === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  cursor: pointer;
`;

function App() {
  return (
    <div>
      <Button btntype="primary">Primary Button</Button>
      <br />
      <br />
      <Button>Secondary Button</Button>
    </div>
  );
}

Uslublarni kengaytirish

Bir nechta elementlarning bir xil uslubga ega bo‘lishiga imkon berishning yana bir yo‘li mavjud uslubli componentlarni kengaytirishdir.

Misol uchun, biz Primary Button va SuccessButton yaratishimiz mumkin, ularning ikkalasi ham Button componenti bilan bir xil uslublarga ega, lekin ularda alohida fon ranglari ham mavjud:

import styled from 'styled-components';

const Button = styled.button`
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
`;

const PrimaryButton = styled(Button)`
  background-color: #007bff;
`;

const SuccessButton = styled(Button)`
  background-color: #28a745;
`;

function App() {
  return (
    <div>
      <PrimaryButton>Primary</PrimaryButton>
      <SuccessButton>Success</SuccessButton>
    </div>
  );
}

Componentli ko‘lamli uslublar

Xuddi CSS modullarida bo‘lgani kabi, CSS-in-JS da yaratilgan uslublar componentga kiritilgan.

Ularga noyob nomlar berilgan va ularni faqat import qiluvchi componentda ishlatish mumkin.

Yuqoridagi misolda sahifaning manbasini ko‘rsak, tugmalar bSOFjJ va pkxvl kabi noyob class nomlariga ega bo‘ladi va uslublar bo‘limida bir xil noyob class nomlari bilan CSS ga murojaat qiladi.

Global uslublar

Siz shuningdek, oddiy class nomiga ega bo‘lgan va barcha componentlar uchun mavjud bo‘lgan global uslublarni yaratishingiz mumkin:

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  h1 {
    color: white;
    background-color: purple;
    font-family: Arial, sans-serif;
  }

  .myparagraph {
    font-family: courier, monospace;
    color: blue;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <h1>Welcome!</h1>
      <p className="myparagraph">This paragraph is styled with global styles.</p>
    </>
  );
}

Yuqoridagi misolda natija manbasini ko‘rsak, CSS oddiy nomlarga ega bo‘ladi va barcha componentlar uchun mavjud bo‘ladi.