Penggayaan dengan Styled Components dalam React

Dalam pelajaran sebelumnya, kita telah melihat teknik penggayaan menggunakan CSS global dan penggayaan sebaris. Dalam pelajaran ini, kita akan bekerja dengan pendekatan yang lebih berkesan untuk aplikasi besar - penggunaan pustaka styled-components.

Jadi, mari kita ambil komponen kami tanpa gaya CSS, yang kami gunakan dalam pelajaran lepas:

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

Sebagai permulaan, mari pasang pustaka Styled Components:

npm install --save styled-components

Kemudian import pakej yang diperlukan ke dalam komponen App:

import styled from 'styled-components';

Sekarang kita boleh membungkus tag dalam gaya dan menggunakannya sebagai komponen React, tetapi dengan gaya yang dilampirkan terus dalam JS. Pendekatan ini juga dipanggil CSS dalam JS.

Mari kita gayakan perenggan pertama. Untuk itu sebelum fungsi App selepas baris import buat komponen Text1. Dalam objek styled dari pustaka, kita memerlukan perenggan, oleh itu kami menulis styled.p. Kemudian, dalam rentetan templat, senaraikan gaya CSS yang diperlukan - seperti dalam CSS biasa:

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

Seperti yang anda lihat, kami menggunakan CSS tulen di sini dalam bentuk rentetan templat, yang sangat mudah. Dengan cara yang sama kita boleh menggunakan pertanyaan media, pseudoelemen, pemilih dan fungsi CSS lain.

Sekarang di dalam fungsi komponen App tukar tag p kepada komponen yang kami buat Text1 dengan gaya CSS:

<Text1>text</Text1>

Dengan cara yang sama, mari gayakan perenggan kedua dan ketiga. Untuk itu buat komponen Text2 dan Text3:

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

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

Akhirnya, mari gayakan div kami. Untuk itu buat komponen dan namakannya Container:

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

Tukar semua tag kami dengan komponen yang dibuat:

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

Berkat pendekatan ini, kita boleh mewujudkan komponen yang boleh digunakan berulang kali dengan gaya.

Jika anda membuka penjanaan markup dalam panel pemaju dalam pelayar, anda akan melihat bahawa setiap komponen mempunyai kelas uniknya sendiri yang dijana. Oleh itu, kami tidak perlu lagi bimbang tentang konflik antara kelas komponen individu.

Dengan cara yang sama, anda boleh menggayakan komponen, menggunakan, sebagai contoh, pustaka Emotion.

Ambil komponen React yang anda buat dalam tugas untuk pelajaran lepas, gayakan ia, menggunakan pustaka Styled Components.