Стилизација помоћу 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>
	);
}

Захваљујући овом приступу могуће је креирати вишеструко употребљиве компоненте са стиловима.

Ако отворите генерисани HTML у панелу програмера у прегледачу, видећете да је код сваке компоненте генерисана своја јединствена класа. На тај начин, више не морамо да бринемо о конфликтима између класа појединачних компоненти.

На сличан начин могуће је стилизовати компоненте, користећи, на пример, библиотеку Emotion.

Узмите React компоненту коју сте правили у задатку за прошлу лекцију, стилизујте је, користећи библиотеку Styled Components.