Používání props se Styled Components v Reactu

Z předchozí lekce jsme se dozvěděli, že komponenty na stylovaných pomocí knihovny Styled Components lze používat jako běžné React komponenty. V této lekci uvidíme, že zde budou podobným způsobem fungovat i props.

Předpokládejme, že máme React komponent Block a vytvořili jsme v něm stylované pomocí Styled Components komponenty Input a Container:

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

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

Umístíme tři komponenty Input do Container:

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

Pomocí props můžeme nastavovat v komponentech různé atributy. Pojďme nastavit druhému inputu atributy placeholder a type s hodnotami name a text, respectivně, a třetímu inputu u atributu type nastavit hodnotu password:

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

Vytvořte prázdnou React komponentu Block, udělejte v ní div, ve kterém budou tři tlačítka. Pomocí knihovny Styled Components ostylujte tento div a tlačítka. Použitím props zablokujte první tlačítko, a třetímu nastavte typ reset.