Verwendung von Props beim bedingten Rendering mit Styled Components in React

Props können auch für das bedingte Rendering verwendet werden. Nehmen wir die React-Komponente Block, mit der wir in der vorherigen Lektion gearbeitet haben.

Lassen Sie uns den Hintergrund für die erste Eingabe gelb und für andere Eingaben grün machen. Dazu fügen wir in den Stilen für die Komponente Input eine weitere Zeile hinzu, und es ergibt sich:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

Fügen wir dem ersten Eingabefeld die Prop first hinzu:

<Container>
	<Input first />
	<Input placeholder="name" type="text" />
	<Input type="password" />
</Container>

Verwenden Sie das in der Theorie der Lektion vorgestellte bedingte Rendering, um den Code der Lösungsaufgabe aus der vorherigen Lektion so zu modifizieren, dass bei Vorhandensein der Prop warn der Text der Schaltfläche rot und ihr Hintergrund gelb ist, und ohne diese - grüner Hintergrund und weißer Text. Übergeben Sie warn an die zweite Schaltfläche.