Пропстарды 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-ты екінші түймеге беріңіз.