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 пропсун экинчи баскычка бергиле.