Стылізацыя з дапамогай 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;
`;

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