Выкарыстанне пропсаў з Styled Components у React

З мінулага ўрока мы даведаліся, што стылізаваныя з дапамогай бібліятэкі Styled Components кампаненты можна выкарыстоўваць як звычайныя React кампаненты. У гэтым уроку мы ўбачым, што тут падобным чынам будуць працаваць і пропсы.

Выкажам здагадку ў нас ёсць React кампанент Block і мы стварылі ў ім стылізаваныя з дапамогай Styled Components кампаненты Input і Container:

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

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

Размесцім тры кампаненты Input у Container:

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

Стварыце пусты React кампанент Block, зрабіце ў ім дыў, у якім будзе тры кнопкі. З дапамогай бібліятэкі Styled Components, стылізуйце гэты дыў і кнопкі. Выкарыстоўваючы пропсы, заблакіруйце першую кнопку, а трэцяй зрабіце тып reset.