Verwendung von Props mit Styled Components in React

Aus der vorherigen Lektion haben wir gelernt, dass mit der Bibliothek Styled Components gestylte Komponenten wie normale React-Komponenten verwendet werden können. In dieser Lektion werden wir sehen, dass Props hier auf ähnliche Weise funktionieren.

Nehmen wir an, wir haben eine React-Komponente Block und wir haben darin mit Styled Components gestylte Komponenten Input und Container erstellt:

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

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

Platzieren wir drei Input-Komponenten in Container:

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

Mithilfe von Props können wir verschiedene Attribute in den Komponenten setzen. Lassen Sie uns beim zweiten Input die Attribute placeholder und type mit den Werten name bzw. text setzen, und beim dritten Input den Wert des Attributs type auf password setzen:

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

Erstellen Sie eine leere React-Komponente Block, machen Sie darin ein Div, in dem drei Buttons sein werden. Stylen Sie dieses Div und die Buttons mit der Bibliothek Styled Components. Verwenden Sie Props, um den ersten Button zu deaktivieren, und machen Sie den Typ des dritten Buttons zu reset.