Стилизация с помощью 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.

Теперь внутри функции компонентa 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;
`;

И, наконец, стилизуем наш див. Для этого создадим компонент и назовем его 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.