Styled Components arkaly React-da Stil Goýma

Öňki sapaklarda biz global CSS we inlayn stil goýmany ulanmak ýollaryny görduk. Bu sapakda biz uly programmalar üçin has täsirli ýol bilen işleris - styled-components kitaphanasyny ulanmak.

Şeýlelik bilen, öňki sapaklarda ulanyp geçen, CSS stilleri ýok bizim komponentimizi alalyň:

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

Başlangyç üçin Styled Components kitaphanasyny gurmaly:

npm install --save styled-components

Soňra zerur pakety App komponentine import edeliň:

import styled from 'styled-components';

Indi biz tegleri stillere aýlap bileris we olary React komponentleri hökmünde ulanyp bileris, ýöne indi JS içine goşulan stillar bilen. Bu ýola JS-de CSS hem diýilýär.

Gelin birinji abzasy stilleýeliň. Bunuň üçin App funksiýasyndan öň, import setirlerinden soň Text1 komponentini döredeliň. Kitaphananyň styled obýekti içinde biz abzasa gerek, şonuň üçin biz styled.p ýazýarys. Soňra, şablon setirde zerur bolan CSS stillerimizi sanawlaýarys - adaty CSS-deki ýaly:

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

Görşüňiz ýaly, biz bu ýerde arass CSS ulanýarys, şablon setirler görnüşinde, bu örän amatly. Şuňa meňzeş ýoly bilen biz media-soraglar, peswido elementler, sahyjalar we CSS-iň beýleki funksionallyklaryny ulanyp bileris.

Indi App komponent funksiýasynyň içinde p tegini döreden komponentimiz Text1 bilen çalşyryň, ol CSS stillary bilen:

<Text1>tekst</Text1>

Şuňa meňzeş ýoly bilen ikinji we üçünji abzaslary stilleýeliň. Bunuň üçin Text2 we Text3 komponentlerini döredeliň:

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

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

We, ahyrsoňy, biziň div-imizi stilleýeliň. Bunuň üçin komponent döredeliň we oňa Container diýeliň:

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

Hemme teglerimizi döredilen komponentler bilen çalşyryň:

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>tekst</Text1>
			<Text2>tekst</Text2>
			<Text3>tekst</Text3>
		</Container>
	);
}

Bu ýola minnetdar bolup, biz köp gezek ulanýan komponentleri stillar bilen döredip bileris.

Eger brauzeriň işleýjiler panelinde döredilen wersiýany açsaňyz, onda her bir komponentiň öz ýönekeý klaslary döredilendigini görersiňiz. Şeýlelik bilen, biz indi komponentleriň klaslarynyň arasyndaky çaknyşyklar barada alada etmeli däl.

Şuňa meňzeş ýoly bilen komponentleri stillemek mümkin, mysal üçin, Emotion kitaphanasyny ulanmak bilen.

Öňki sapaga degişli mesele üçin etmiş React komponentiňizi alyň, we ony Styled Components kitaphanasyny ulanyp stilleň.