Пропсларни Reactда Styled Components билан шартли рендерингда ишлатиш

Пропсларни шартли рендеринг учун ҳам ишлатиш мумкин. Олдинги дарслиқда ишлаган Block React компонентини оламиз.

Биринчи инпут учун фонни сариқ, қолган инпутлар учун esa яшил қиламиз. Бунинг учун, 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 пропсини иккинчи тугмага ўтқазинг.