Përdorimi i Propesave në Renderim të Kushtëzuar me Styled Components në React

Propesat mund të përdoren edhe për renderim të kushtëzuar. Le të marrim komponentin React Block, me të cilin kemi punuar në mësimin e kaluar.

Le të bëjmë që sfondi për inputin e parë të jetë i verdhë, dhe për inputet e tjerë të jetë i gjelbër. Për këtë, në stilimet për komponentin Input do të shtojmë një rresht tjetër dhe do të marrim:

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

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

Le të shtojmë propesin first inputit të parë:

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

Duke përdorur renderimin e kushtëzuar, të paraqitur në teorinë e mësimit, modifikoni kodin e zgjidhjes së detyrës në mësimin e kaluar në mënyrë që në prani të propesit warn teksti i butonit të jetë i kuq dhe sfondi i tij të jetë i verdhë, dhe pa të - sfond i gjelbër dhe tekst i bardhë. Kalojeni warn butonit të dytë.