Stiilide lisamine Styled Components abil Reactis

Eelmistes õppetükides vaatlesime stiilimise võtteid, kasutades globaalset CSS-i ja inline-stiilimist. Selles õppetükis töötame suuremate rakenduste jaoks tõhusama lähenemisega - teeki styled-components kasutamine.

Niisiis, võtame oma CSS-stiilideta komponendi, mida me eelmistes õppetükides kasutasime:

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

Alustuseks installime teegi Styled Components:

npm install --save styled-components

Seejärel impordime vajaliku paketi komponenti App:

import styled from 'styled-components';

Nüüd saame silte stiilidesse mähkida ja neid kasutada kui React komponente, kuid juba JS-s otse lisatud stiilidega. Sellist lähenemist nimetatakse ka CSS JS-is.

Stylitseerime esimese lõigu. Selleks enne funktsiooni App pärast impordi stringe loome komponendi Text1. Objektist styled teekist vajame lõiku, seega kirjutame styled.p. Seejärel loetleme mallistringis vajalikud CSS-stiilid - nagu tavalises CSS-is:

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

Nagu näete, kasutame siin puhast CSS-i kujul mallistringid, mis on väga mugav. Samamoodi saame kasutada meediapäringuid, pseudoelemente, selektoreid ja muud CSS-i funktsionaalsust.

Nüüd asendame funktsiooni App sees sildi p meie loodud komponendiga Text1 CSS-stiilidega:

<Text1>text</Text1>

Samamoodi stiilime teist ja kolmandat lõiku. Selleks loome komponendid Text2 ja Text3:

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

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

Ja lõpuks stiilime meie div-i. Selleks loome komponendi ja nimetame selle Container:

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

Asendame kõik meie sildid loodud komponentidega:

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

Tänu sellisele lähenemisele saab luua mitmekordselt kasutatavaid komponente stiilidega.

Kui avate loodud veebilehe arendaja paneelis brauseris, näete, et igal komponendil on loodud oma unikaalsed klassid. Seega ei pea me enam muretsema klasside konfliktide pärast eraldi komponentide vahel.

Samamoodi saab stiilida komponente, kasutades näiteks teeki Emotion.

Võtke React komponent, mille te tegite eelmise õppetüki ülesandes, stiilige see, kasutades teeki Styled Components.