Reactda Stylelar | Hooks qo'llanma 4

React componentlarga inline styling, stylesheets va styled-components yordamida style berish.

React dasturiga style qo'shishning bir necha yo'llari mavjud: Inline CSS styling, CSS yoki SCSS stylesheets yoki styled-components kutubxonasi yordamida JavaScriptda CSS. Bu darsda biz bularni navbatma-navbat ko'rib chiqamiz.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/reactda-stylelar-v8vgrq

Componentingizni yarating

Birinchi navbatda, siz React component yaratishingiz kerak. Man quyidagicha oddiy button yarataman:

import React from "react"

const MyButton = () => {
		return <button>Sign in</button>
}

export default MyButton

Stylelarsiz button rasmning chapdagisi kabi ko'rinadi. Biz esa uning o'ngdagisiga o'xshashini hohlaymiz va buni bajarishni turli yo'llarini ko'rib chiqamiz.

Inline styling

Inline styling - bir elementga HTML style atributlari yordamida style berish. Buttonga inline style berish quyidagicha amalga oshiriladi:

const MyButton = () => {
		return <button 
		style={{
		    background: "linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%)", 
		    padding: "12px 25px", 
		    border: "none",
		    borderRadius: "30px",
		    color: "white",
		    fontWeight: "bold",
		    fontFamily: "Segoe UI, sans-serif"
		}}>
				Sign in
		</button>
}

export default MyButton

Eslatma: Inline Stylelarni faqatgina zarur holatlarda ishlating. Chunki bu website ingizning performance/ishlashiga va faylingizning tartibsiz holatga kelishiga sabab bo'ladi.

CSS Stylesheets

Bu React dasturlariga style berishning mashxur yo'llaridan biri. Siz alohida stylesheet yaratasiz va uni komponentingizga import qilasiz. Bu HTML ga style qo'shishga o'xshab ketadi.

Buttonimizga style berish uchun, biz unga class name berishimiz kerak. Bu className atributi orqali amalga oshiriladi.

const MyButton = () => {
		return <button className="myButton">Sign in</button>
}

export default MyButton

Endi styles.css nomli yangi fayl yaratamiz va unga quyidagilarni yozamiz.

.myButton {
  background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%); 
  padding: 12px 25px; 
  border: none;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-family: Segoe UI, sans-serif;
}

Endi style faylni komponent faylimizga import qilib olamiz.

import "./styles.css";

const MyButton = () => {
		return <button className="myButton">Sign in</button>
}

export default MyButton

Styled Components

styled-components React kutubxonasi bo'lib, CSS va JavaScript kombinatsiyasi yordamida komponentlarga style qo'shishga yordam beradi. styled-components ni ishlatish uchun birinchi navbatda uni o'rnatib olish kerak. Terminalda quyidagicha yozing:

npm install styled-components

O'rnatilgandan so'ng uni faylga import qilib olish kerak.

import styled from "styled-components";

Keyin biz faylning pastki qismida styled.button orqali yangi Button komponent yaratamiz

import styled from "styled-components";

const MyButton = () => {
		return <Button>Sign in</Button>
}

export default MyButton

const Button = styled.button``

backticks(``) ichida, styled.button dan keyin, CSS imizni yozamiz.

import styled from "styled-components";

const MyButton = () => {
		return <Button>Sign in</Button>
}

export default MyButton

const Button = styled.button`
    background: linear-gradient(91.4deg, #2fb8ff 0%, #9eecd9 100%); 
    padding: 12px 25px; 
    border: none;
    border-radius: 30px;
    color: white;
    font-weight: bold;
    font-family: Segoe UI, sans-serif;
`

styled-components qaytalanuvchi componentlar yaratishda juda foydali. Hattoki biz props orqali componentimiz qanday styleda bo'lishini belgilashimiz ham mumkin.