Χρήση Props στην Υποθετική Απόδοση με Styled Components στο React

Τα props μπορούν επίσης να χρησιμοποιηθούν για υποθετική απόδοση. Ας πάρουμε το React component Block, με το οποίο δουλέψαμε στο προηγούμενο μάθημα.

Ας κάνουμε το φόντο για την πρώτη εισόδου να είναι κίτρινο, και για τις άλλες εισόδους πράσινο. Για να το κάνουμε αυτό, στους στυλ για το component Input προσθέτουμε ακόμη μια γραμμή και θα γίνει:

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

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

Προσθέτουμε το prop first στην πρώτη είσοδο:

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

Χρησιμοποιώντας την υποθετική απόδοση, όπως παρουσιάστηκε στη θεωρία του μαθήματος, τροποποιήστε τον κώδικα λύσης της άσκησης του προηγούμενου μαθήματος, έτσι ώστε όταν υπάρχει το prop warn το κείμενο του κουμπιού να είναι κόκκινο και το φόντο του να είναι κίτρινο, και χωρίς αυτό - πράσινο φόντο και λευκό κείμενο. Περάστε το warn στο δεύτερο κουμπί.