Användning av props i villkorsstyrd rendering med Styled Components i React

Props kan också användas för villkorsstyrd rendering. Låt oss ta React-komponenten Block som vi arbetade med i föregående lektion.

Låt oss göra så att bakgrunden för den första inmatningen är gul och för andra inmatningar grön. För att göra detta, lägg till ytterligare en rad till stilarna för komponenten Input och det blir:

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

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

Lägg till prop first till den första inmatningen:

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

Använd den villkorsstyrda renderingen som presenteras i lektionens teori, modifiera koden för lösningen till föregående lektion så att när prop warn finns så blir knappens text röd och dess bakgrund gul, och utan den - grön bakgrund och vit text. Skicka warn till den andra knappen.