Styled Components-ის გამოყენებით სტილიზაცია React-ში

წინა გაკვეთილებში ჩვენ განვიხილეთ სტილიზაციის მეთოდები გლობალური CSS-ის და ინლაინური სტილიზაციის გამოყენებით. ამ გაკვეთილში ჩვენ ვიმუშავებთ უფრო ეფექტურ მიდგომაზე დიდი აპლიკაციებისთვის - ბიბლიოთეკის styled-components გამოყენებით.

ასე რომ, ავიღოთ ჩვენი CSS სტილების გარეშე არსებული კომპონენტი, რომელიც ჩვენ გამოვიყენეთ წინა გაკვეთილებში:

function App() {
	return (
		<div>
			<p>ტექსტი</p>
			<p>ტექსტი</p>
			<p>ტექსტი</p>
		</div>
	);
}

დასაწყისისთვის დავაინსტალიროთ ბიბლიოთეკა Styled Components:

npm install --save styled-components

შემდეგ იმპორტირება საჭირო პაკეტი კომპონენტში App:

import styled from 'styled-components';

ახლა ჩვენ შეგვიძლია ტეგების შეფარდება სტილებში და მათი გამოყენება როგორც React კომპონენტები, მაგრამ უკვე JS-ში ჩაშენებული სტილებით. ამ მიდგომას ასევე უწოდებენ CSS in JS.

მოდით დავასტილიზოთ პირველი აბზაცი. ამისთვის ფუნქციის App წინ, იმპორტების სტრიქონების შემდეგ შევქმნათ კომპონენტი Text1. ბიბლიოთეკიდან styled ობიექტიდან ჩვენ გვჭირდება აბზაცი, ამიტომ ვწერთ styled.p. შემდეგ, შაბლონურ სტრიქონში ჩამოვთვალოთ საჭირო CSS სტილები - როგორც ჩვეულებრივ CSS-ში:

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

როგორც ხედავთ, ჩვენ აქ ვიყენებთ სუფთა CSS-ს შაბლონური სტრიქონების სახით, რაც ძალიან მოსახერხებელია. ანალოგიურად ჩვენ შეგვიძლია მედია-მოთხოვნების გამოყენება, ფსევდოელემენტები, სელექტორები და CSS-ის სხვა ფუნქციონალი.

ახლა კომპონენტის App ფუნქციის შიგნით შევცვალოთ ტეგი p ჩვენ მიერ შექმნილ კომპონენტზე Text1 CSS სტილებით:

<Text1>ტექსტი</Text1>

ანალოგიურად დავასტილიზოთ მეორე და მესამე აბზაცები. ამისთვის შევქმნათ კომპონენტები Text2 და Text3:

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

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

და, ბოლოს, დავასტილიზოთ ჩვენი div. ამისთვის შევქმნათ კომპონენტი და ვუწოდოთ მას 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>ტექსტი</Text1>
			<Text2>ტექსტი</Text2>
			<Text3>ტექსტი</Text3>
		</Container>
	);
}

ამ მიდგომის წყალობით შესაძლებელია მრავალჯერადად გამოყენებადი კომპონენტების შექმნა სტილებთან ერთად.

თუ გენერირებულ ვერსტკას გახსნით დეველოპერის პანელში ბრაუზერში, თქვენ დაინახავთ, რომ ყველა კომპონენტს აქვს თავისი უნიკალური კლასები. ამრიგად, ჩვენ აღარ გვჭირდება გვაწუხებდეს კონფლიქტების შესახებ ცალკეული კომპონენტების კლასებს შორის.

ანალოგიურად შესაძლებელია კომპონენტების სტილიზაცია, მაგალითად, Emotion ბიბლიოთეკის გამოყენებით.

აიღეთ React კომპონენტი, რომელიც თქვენ გააკეთეთ წინა გაკვეთილის ამოცანაში, დაასტილიზეთ იგი, გამოიყენეთ Styled Components ბიბლიოთეკა.