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

Сега във функцията на компонента 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;
`;

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

Вземете React компонента, който направихте в задачата към предишния урок, стилизирайте го, използвайки библиотеката Styled Components.