Penggunaan Props dengan Styled Components dalam React

Dari pelajaran lepas, kita telah mengetahui bahawa komponen yang distyling menggunakan pustaka Styled Components boleh digunakan seperti komponen React biasa. Dalam pelajaran ini, kita akan melihat bahawa di sini props juga akan berfungsi dengan cara yang serupa.

Katakan kita mempunyai komponen React Block dan kita telah mencipta komponen yang distyling menggunakan Styled Components di dalamnya, iaitu Input dan Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Letakkan tiga komponen Input dalam Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Dengan menggunakan props, kita boleh menetapkan atribut yang berbeza dalam komponen. Mari tetapkan untuk input kedua atribut placeholder dan type dengan nilai name dan text, masing-masing, dan untuk input ketiga, tetapkan atribut type kepada nilai password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Buat komponen React kosong Block, buat div di dalamnya yang mengandungi tiga tombol. Dengan menggunakan pustaka Styled Components, style div dan tombol tersebut. Menggunakan props, lumpuhkan tombol pertama, dan jadikan jenis tombol ketiga sebagai reset.