Стилизация с помощью Styled Components в React

В предыдущих уроках мы рассмотрели приемы стилизации с использованием глобального CSS и инлайновой стилизации. В этом уроке мы поработаем с более эффективным для больших приложений подходом - использованием библиотеки styled-components.

Итак, возьмем наш компонент без CSS стилей, который мы использовали в прошлых уроках:

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

Для начала установим библиотеку Styled Components:

npm install --save styled-components

Затем импортируем необходимый нам пакет в компонент App:

import styled from 'styled-components';

Теперь мы можем оборачивать теги в стили и применять их как React компоненты, но уже с прикрепленными прямо в JS стилями. Такой подход еще называют CSS в JS.

Давайте стилизуем первый абзац. Для этого перед функцией App после строк импорта создадим компонент Text1. В объекте styled из библиотеки нам нужен абзац, поэтому мы пишем styled.p. Затем, в шаблонной строке перечисляем необходимые нам CSS стили - как в обычном CSS:

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

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

Теперь внутри функции компонентa App заменим тег p на созданный нами компонент Text1 с CSS стилями:

<Text1>text</Text1>	   

Подобным образом стилизуем второй и третий абзацы. Для этого создадим компоненты Text2 и Text3:

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

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

И, наконец, стилизуем наш див. Для этого создадим компонент и назовем его Container:

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

Заменим все наши теги созданными компонентами:

import 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.