Styled Components ёрдамида Reactда стиллаш

Олдинги дарсларда биз глобал CSS ва инлайн стиллашни қўллаш усулларини кўриб чиқдик. Ушбу дарсда биз катта иловалар учун янада самаралироқ ёндашув - styled-components библиотекасини қўллаш билан ишлаймиз.

Шунинг учун, олдинги дарсларда қўллаган CSS стилларисиз компонентимизни оламиз:

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

Бошлаш учун биз Styled Components библиотекасини ўрнатамиз:

terminalnpm install --save styled-components

Сўнгра зарур бўлган пакетни App компонентига импорт қиламиз:

App.jsimport styled from 'styled-components';

Энди биз тегларни стилларга ўраб қўйишимиз ва уларни React компонентлари сифатида қўллашимиз мумкин, лекин JS ичига тўғридан-тўғри қўшилган стиллар билан. Бундай ёндашув CSS в JS деб ҳам аталади.

Биринчи абзацни стиллаймиз. Бунинг учун App функциясидан олдин, импорт сатрларидан кейин Text1 компонентини яратамиз. styled объектидан бизга абзац керак, шунинг учун биз styled.p деб ёзамиз. Сўнгра, шаблонли сатр ичида зарур бўлган CSS стилларни келтирамиз - оддий CSSдаги каби:

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

Кўриб турганingizдек, биз бу ерда шаблонли сатрлар шаклидаги тоза CSSдан фойдаланамиз, бу жуда қулай. Шунинг ўхшаш биз медиа-сўровлар, судёэлементлар, селекторлар ва CSSнинг бошқа функционалидан фойдаланишимиз мумкин.

Энди App компоненти функцияси ичида p тегини биз яратган компонент Text1 билан алмаштирамиз:

App.js<Text1>text</Text1>     

Шунинг ўхшаш иккинчи ва учинчи абзацларни стиллармиз. Бунинг учун Text2 ва Text3 компонентларини яратамиз:

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

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

Ва, ниҳоят, бизнинг дивимизни стиллармиз. Бунинг учун компонент яратамиз ва уни Container деб атаймиз:

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

Барча тегларимизни яратилган компонентлар билан алмаштирамиз:

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>
  );
}

Бундай ёндашув ёрдамида стиллар билан қайта-қайта ишлатиладиган компонентлар яратиш мумкин.

Агар сиз браузерда ишлаб чиқарувчи панелида яратилган версткани ochsangiz, у ҳолда ҳар бир компонентнинг ўзига хос уникал синфлар яратилганини кўрасиз. Шу тариқа, бизга ҳар бир компонентнинг синфлари ўртасидаги конфликтлар ҳақида қайғуриш шарт эмас.

Шунинг ўхшаш компонентларни стиллаш мумкин, масалан, Emotion библиотекасини қўллаган ҳолда.