React CSS uslublari

CSS bilan React uslubini yaratishning ko‘plab metodlari mavjud, bu qo‘llanma uchta umumiy usulni batafsil ko‘rib chiqadi:

Inline uslublar
CSS uslublar jadvallari
CSS modullari

Inline uslublar

Inline style atributiga ega elementni uslublash uchun qiymat JavaScript obyekti bo‘lishi kerak:

Misol:

Styling ma’lumotlariga ega obyektni joylashtiring:

const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Misolni ishga tushirish »

Eslatma: JSX da JavaScript ifodalari jingalak qavslar ichida yoziladi va JavaScript obyektlari ham jingalak qavslardan foydalanganligi sababli, yuqoridagi misoldagi uslublar ikkita jingalak qavslar to‘plami ichida yozilgan {{}}.

camelCased xususiyat nomlari

Inline CSS JavaScript obyektida yozilganligi sababli, xususiyatlar bilan background-color kabi defis ajratgichlar, camelCase sintaksisi bilan yozilishi kerak:

Misol:

background-color o‘rniga backgroundColor’dan foydalaning:

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Misolni ishga tushirish »

JavaScript obyekti

Shuningdek, siz uslub ma’lumotlariga ega obyekt yaratishingiz va stil atributiga murojaat qilishingiz mumkin:

Misol:

myStyle nomli uslub obyektini yarating:

const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Misolni ishga tushirish »

CSS uslublar jadvali

Siz CSS uslubingizni alohida faylga yozishingiz mumkin, shunchaki faylni .css fayl kengaytmasi bilan saqlang va uni ilovangizga import qiling.

Misol

"MyStylesheet.css" nomli yangi fayl yarating va unga bir nechta CSS kodini kiriting:

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Eslatma: Siz xohlagan faylni chaqirishingiz mumkin, faqat to‘g‘ri fayl kengaytmasini eslab qoling.

Ilovangizga uslublar jadvalini import qiling:

Misol

Uslublar jadvalini import qilish uchun import operatoridan foydalaning:

import { createRoot } from 'react-dom/client';
import './MyStylesheet.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <Header />
);

Misolni ishga tushirish »

React .css kengaytmasi bilan import qilingan fayllarga CSS uslublar jadvali sifatida qarash kerakligini biladi.

Eslatma: Uslublar faqat uni import qilgan component uchun mavjud bo‘ladi.

CSS modullari

Ilovangizga uslublar qo‘shishning yana bir usuli - bu CSS modullaridan foydalanish.

CSS modullari alohida fayllarga joylashtirilgan componentlar uchun qulaydir.

Modul ichidagi CSS faqat uni import qilgan component uchun mavjud va siz nomlar bilan ziddiyatlardan xavotirlanishingiz shart emas.

.module.css kengaytmasi bilan CSS modulini yarating, masalan: my-style.module.css.

Misol

"my-style.module.css" nomli yangi fayl yarating va unga bir nechta CSS kodini kiriting:

.bigred {
  color: Tomato;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

Uslublar jadvalini componentingizga import qiling:

Misol

Stillar faylini import qilish uchun import styles’dan foydalaning:

import { createRoot } from 'react-dom/client';
import styles from './my-style.module.css'; 
  
const Car = () => {
  return <h1 className={styles.bigred}>Hello Car!</h1>;
}
  
createRoot(document.getElementById('root')).render(
  <Car />
);

Misolni ishga tushirish »

Keyingi bobda CSS modullari haqida ko‘proq bilib olasiz.

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish