Styled Components билан Reactда пропслардан фойдаланиш

Ўтган дарсдан биз билдикки, Styled Components кутубхонаси ёрдамида стилланган компонентларни оддий React компонентлари каби ишлатиш мумкин. Ушбу дарсда биз бу ерда ўхшаш тарзда пропслар ҳам ишлашини кўрамиз.

Фараз қилайлик, бизда Block номли React компоненти бор ва биз унда Styled Components ёрдамида стилланган Input ва Container компонентларини яратдик:

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

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

Container ичига учта Input компонентини жойлаштирамиз:

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

Пропслар ёрдамида биз компонентларга турли хил атрибутларни белгилаш мумкин. Келик, иккинчи инпутга placeholder ва type атрибутларини мос равишда name ва text қийматлари билан, учинчи инпутнинг эса type атрибутига password қийматини белгилаймиз:

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

Бўш Block React компонентини яратинг, унинг ичида учта тугма бўлган див қилинг. Styled Components кутубхонаси ёрдамида бу див ва тугмаларни стилланг. Пропслар ёрдамида биринчи тугмани блокланг, учинчисига эса reset турини беринг.