Stilizimi me Styled Components në React

Në mësimet e mëparshme shqyrtuam teknikat e stilizimit duke përdorur CSS globale dhe stilizim inline. Në këtë mësim ne do të punojmë me një qasje më efikase për aplikacionet e mëdha - përdorimin e bibliotekës styled-components.

Pra, le të marrim komponentin tonë pa stile CSS, që kemi përdorur në mësimet e kaluara:

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

Së pari le të instalojmë bibliotekën Styled Components:

npm install --save styled-components

Pastaj importojmë paketën e nevojshme në komponentin App:

import styled from 'styled-components';

Tani ne mund t'i mbështjellim etiketat në stile dhe t'i aplikojmë ato si komponentë React, por tani me stile të lidhura direkt në JS. Kjo qasje quhet gjithashtu CSS në JS.

Le të stilizojmë paragrafin e parë. Për këtë përpara funksionit App pas rreshtave të importit krijojmë komponentin Text1. Në objektin styled nga biblioteka na duhet një paragraf, prandaj shkruajmë styled.p. Pastaj, në vargun e shabllonit listojmë stilet CSS të nevojshme - si në CSS-in e zakonshëm:

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

Siç e shihni, ne përdorim këtu CSS të pastër në formën e vargjeve të shabllonit, që është shumë i përshtatshëm. Në mënyrë të ngjashme ne mund të përdorim media query, pseudo-elementë, selektorë dhe funksionalitete të tjera të CSS.

Tani brenda funksionit të komponentit App zëvendësojmë etiketën p me komponentin e krijuar nga ne Text1 me stilet CSS:

<Text1>text</Text1>

Në mënyrë të ngjashme le të stilizojmë paragrafin e dytë dhe të tretë. Për këtë krijojmë komponentët Text2 dhe Text3:

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

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

Dhe, së fundi, le të stilizojmë div-in tonë. Për këtë krijojmë një komponent dhe e quajmë Container:

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

Zëvendësojmë të gjitha etiketat tona me komponentët e krijuar:

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

Falë kësaj qasjeje mund të krijohen komponentë të ripërdorshëm me stile.

Nëse hapni markup-in e gjeneruar në panelin e zhvilluesit në shfletues, do të shihni se çdo komponent ka klasat e veta unike të gjeneruara. Kështu, nuk kemi më nevojë të shqetësohemi për konfliktet midis klasave të komponentëve individualë.

Në mënyrë të ngjashme mund të stilizohen komponentët, duke përdorur, për shembull, bibliotekën Emotion.

Merrni komponentin React që ju keni bërë në detyrën e mësimit të kaluar, stilizojeni atë, duke përdorur bibliotekën Styled Components.