Stílusok alkalmazása Styled Components segítségével Reactban

Az előző leckékben megvizsgáltuk a stílusozás technikáit globális CSS és inline stílusozás használatával. Ebben a leckében egy hatékonyabb megközelítéssel fogunk dolgozni nagy alkalmazásokhoz - a styled-components könyvtár használatával.

Tehát, vegyük azt a CSS stílusok nélküli komponensünket, amelyet az előző leckékben használtunk:

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

Először is telepítsük a Styled Components könyvtárat:

npm install --save styled-components

Ezután importáljuk a szükséges csomagot a App komponensbe:

import styled from 'styled-components';

Most már becsomagolhatjuk a címkéket stílusokba és React komponensként használhatjuk őket, de már a JS-ben közvetlenül megadott stílusokkal. Ezt a megközelítést CSS in JS-nek is hívják.

Stílusozzuk az első bekezdést. Ehhez a App függvény előtt, az import sorok után hozzuk létre a Text1 komponenst. A könyvtár styled objektumában szükségünk van egy bekezdésre, ezért írjuk, hogy styled.p. Ezután a template stringben soroljuk fel a szükséges CSS stílusokat - pontosan mint a szokásos CSS-ben:

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

Amint látható, itt tiszta CSS-t használunk template string formájában, ami nagyon kényelmes. Hasonló módon használhatunk média query-ket, pszeudo-elemeket, selector-okat és egyéb CSS funkcionalitást.

Most a App komponens függvényén belül cseréljük le a p címkét az általunk létrehozott Text1 komponensre a CSS stílusokkal:

<Text1>text</Text1>

Hasonló módon stílusozzuk a második és harmadik bekezdést. Ehhez hozzuk létre a Text2 és Text3 komponenseket:

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

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

Végül, stílusozzuk a div-ünket. Ehhez hozzunk létre egy komponenst és nevezzük el Container-nek:

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

Cseréljük le az összes címkénket a létrehozott komponensekre:

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>
	);
}

Ennek a megközelítésnek köszönhetően többször újrahasználható komponenseket hozhatunk létre stílusokkal.

Ha megnyitod a generált HTML-t a böngésző fejlesztői eszközének paneljén, látni fogod, hogy minden komponensnek saját egyedi osztálya generálódott. Így nem kell többé aggódnunk az egyes komponensek osztályai közötti konfliktusok miatt.

Hasonló módon stílusozhatók komponensek, használva például az Emotion könyvtárat.

Vegyétek azt a React komponenst, amit az előző lecke feladatához készítettetek, stílusozzátok át a Styled Components könyvtár használatával.