Користење на пропси во условно рендерирање со Styled Components во React

Пропси може да се користат и за условно рендерирање. Да го земеме React компонентот Block, со кој работевме во претходната лекција.

Да направиме така што позадината за првото поле да биде жолта, а за останатите полиња зелена. За ова, во стиловите за компонентата Input додадеме уште еден ред и ќе добиеме:

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

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

Да го додадеме пропсот first на првото поле:

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

Користејќи условно рендерирање, прикажано во теоријата на лекцијата, модифицирајте го кодот на решението за задачата од претходната лекција така што при присуство на пропсот warn текстот на копчето да биде црвен и неговата позадина да биде жолта, а без него - зелена позадина и бел текст. Проследете го warn на второто копче.