Стилизиране с 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;
`;

Както виждате, тук използваме чист CSS под формата на шаблонни низове, което е много удобно. По подобен начин можем да използваме медийни заявки, псевдоелементи, селектори и друга функционалност на CSS.

Сега във функцията на компонента App ще заменим тага p със създадения от нас компонент Text1 с CSS стилове:

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;
`;

И накрая, ще стилизираме нашия div. За това ще създадем компонент и ще го наименуваме 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>
  );
}

Благодарение на този подход можем да създаваме многократно използвани компоненти със стилове.

Ако отворите генерираната верстка в панела на разработчика в браузъра, ще видите, че всеки компонент има генерирани свои уникални класове. По този начин не е необходимо повече да се притесняваме за конфликти между класове на отделни компоненти.

По подобен начин могат да се стилизират компоненти, използвайки, например, библиотеката Emotion.