React-də Styled Components ilə Stil vermə

Əvvəlki dərslərdə biz qlobal CSS və inline stil vermə üsullarını nəzərdən keçirdik. Bu dərsdə biz daha böyük proqramlar üçün daha səmərəli olan yanaşma ilə işləyəcəyik - styled-components kitabxanasından istifadə.

Beləliklə, əvvəlki dərslərdə istifadə etdiyimiz, CSS stiləri olmayan komponentimizi götürək:

App.jsfunction App() {
  return (
    <div>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  );
}

Əvvəla, kitabxananı quraşdıraq Styled Components:

terminalnpm install --save styled-components

Sonra, lazımi paketi App komponentinə import edək:

App.jsimport styled from 'styled-components';

İndi biz teqləri stilə bürüyə bilərik və onları artıq JS-də əlavə edilmiş stillərlə React komponentləri kimi tətbiq edə bilərik. Bu yanaşma həmçinin CSS in JS adlanır.

Gəlin birinci abzası stilə edək. Bunun üçün App funksiyasından əvvəl, import sətirlərindən sonra Text1 komponentini yaradaq. Kitabxananın styled obyektindən bizə abzas lazımdır, ona görə də styled.p yazırıq. Sonra, şablon sətirdə bizə lazım olan CSS stillərini sadalayırıq - adi CSS-də olduğu kimi:

App.jsconst Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

Gördüyünüz kimi, biz burada şablon sətirlər şəklində saf CSS istifadə edirik, bu da çox rahatdır. Eyni şəkildə biz media sorğuları, psevdoelementlər, selektorlar və CSS-in digər funksionallığından istifadə edə bilərik.

İndi App komponent funksiyasının daxilində p teqini bizim yaratdığımız CSS stilləri olan Text1 komponenti ilə əvəz edək:

App.js<Text1>text</Text1>     

Eyni şəkildə, ikinci və üçüncü abzasları stilə edək. Bunun üçün Text2 və Text3 komponentlərini yaradaq:

App.jsconst Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

Nəhayət, div-imizi stilə edək. Bunun üçün bir komponent yaradaq və onu Container adlandıraq:

App.jsconst Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

Bütün teqlərimizi yaradılmış komponentlərlə əvəz edək:

Calculator.jsimport styled from "styled-components";

const Container = styled.div`
  width: 200px;
  border: 2px solid brown;
  padding: 10px;
  text-align: center;
`;

const Text1 = styled.p`
  color: orangered;
  font-weight: bold;
`;

const Text2 = styled.p`
  font-style: italic;
  color: brown;
`;

const Text3 = styled.p`
  background-color: orange;
  font-weight: bold;
  color: white;
`;

function App() {
  return (
    <Container>
      <Text1>text</Text1>
      <Text2>text</Text2>
      <Text3>text</Text3>
    </Container>
  );
}

Bu yanaşma sayəsində stilləri olan təkrar istifadə oluna bilən komponentlər yaratmaq olar.

Əgər siz brauzerdə developer panelində yaradılmış verilmiş quruluşu açsanız, görəcəksiniz ki, hər bir komponentin öz unikal sinifləri yaradılıb. Beləliklə, bizim artıq ayrı-ayrı komponentlərin sinifləri arasında toqquşmalardan narahat olmağa ehtiyacımız yoxdur.

Eyni şəkildə, komponentləri stilə etmək olar, məsələn, Emotion kitabxanasından istifadə edərək.