Styling dengan Styled Components di React

Dalam pelajaran sebelumnya, kita telah membahas teknik styling menggunakan CSS global dan styling inline. Dalam pelajaran ini, kita akan bekerja dengan pendekatan yang lebih efektif untuk aplikasi besar - yaitu penggunaan pustaka styled-components.

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

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

Pertama-tama, mari instal pustaka Styled Components:

npm install --save styled-components

Kemudian impor paket yang kita perlukan ke dalam komponen App:

import styled from 'styled-components';

Sekarang kita dapat membungkus tag dalam gaya dan menggunakannya sebagai komponen React, tetapi dengan gaya yang langsung melekat di dalam JS. Pendekatan ini juga disebut CSS-in-JS.

Mari kita beri gaya pada paragraf pertama. Untuk melakukannya, sebelum fungsi App, setelah baris impor buat komponen Text1. Dalam objek styled dari pustaka, kita membutuhkan tag paragraf, jadi kita tulis styled.p. Kemudian, dalam string template, sebutkan gaya CSS yang kita perlukan - seperti di CSS biasa:

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

Seperti yang Anda lihat, di sini kita menggunakan CSS murni dalam bentuk string template, yang sangat nyaman. Dengan cara yang sama kita dapat menggunakan kueri media, pseudo-elemen, selector, dan fungsionalitas CSS lainnya.

Sekarang di dalam fungsi komponen App ganti tag p dengan komponen yang kita buat Text1 dengan gaya CSS:

<Text1>text</Text1>

Dengan cara yang sama, mari kita beri gaya pada paragraf kedua dan ketiga. Untuk melakukannya, 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;
`;

Dan akhirnya, mari beri gaya pada div kita. Untuk itu, buat sebuah komponen dan beri nama Container:

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

Ganti semua tag kita dengan komponen yang telah 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 dapat membuat komponen yang dapat digunakan kembali dengan gaya.

Jika Anda membuka markup yang dihasilkan di panel pengembang di browser, Anda akan melihat bahwa setiap komponen memiliki kelas uniknya sendiri yang dihasilkan. Dengan demikian, kita tidak perlu lagi khawatir tentang konflik antara kelas dari komponen yang terpisah.

Dengan cara yang sama, kita dapat menata gaya komponen, menggunakan, misalnya, pustaka Emotion.

Ambil komponen React yang Anda buat dalam tugas untuk pelajaran sebelumnya, beri gaya, dengan menggunakan pustaka Styled Components.