Стилизација со 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.