CSS Styling

React-ni CSS bilan Styling qilish

React-ni CSS bilan styling qilishning bir nechta usullari mavjud. Ushbu darslikda uchta umumiy usulga yaqinroq qaraymiz:

• Inline styling
• CSS stylesheets
• CSS Modules

Inline Styling

Elementni inline style atributi bilan styling qilish uchun qiymat JavaScript obyekti bo'lishi kerak:

Misol:

Stil ma'lumotlarini o'z ichiga olgan obyektni qo'shing:

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

CamelCased Property Names

Inline CSS JavaScript obyekti sifatida yozilganligi sababli, gidrojenli ajratgichlar bilan bo'lgan xususiyatlar, masalan background-color, camel case sintaksisi bilan yozilishi kerak:

Misol:

background-color o'rniga backgroundColor ishlating:

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

JavaScript Object

Siz shuningdek, styling ma'lumotlarini o'z ichiga olgan obyekt yaratishingiz va uni style atributida murojaat qilishingiz mumkin:

Misol:

myStyle nomli styling 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>
    </>
  );
};

CSS Stylesheet

CSS styling-ni alohida faylda yozishingiz mumkin, faqat faylni .css kengaytmasi bilan saqlang va uni ilovangizga import qiling.

App.css:

Yangi fayl yarating, uni "App.css" deb nomlang va unga CSS kodini qo'shing:

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

Faylni ilovangizga import qiling:

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';
 
const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
};
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);

CSS Modules

Ilovangizga styling qo'shishning boshqa bir usuli CSS Modules-dan foydalanishdir.

CSS Modules alohida fayllarda joylashgan komponentlar uchun qulaydir.

Modul ichidagi CSS faqat uni import qilgan komponent uchun mavjud bo'ladi, shuning uchun nomlar to'qnashuvlari haqida xavotirlanishingiz shart emas.

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

Yangi fayl yarating, uni "my-style.module.css" deb nomlang va unga CSS kodini qo'shing:

my-style.module.css:

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

Komponentga styling faylini import qiling:

Car.js:

import styles from './my-style.module.css';
 
const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
};
 
export default Car;

Komponentni ilovangizga import qiling:

index.js:

import ReactDOM from 'react-dom/client';
import Car from './Car.js';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);