Използване на пропси със 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, направете в него div, в който да има три бутона. Чрез библиотеката Styled Components, стилизирайте този div и бутоните. Използвайки пропси, блокирайте първия бутон, а на третия задайте тип reset.