Penggunaan Props dalam Rendering Bersyarat dengan Styled Components dalam React

Props juga boleh digunakan untuk rendering bersyarat. Mari kita ambil komponen React Block yang kami gunakan dalam pelajaran sebelumnya.

Mari kita buat latar belakang untuk input pertama menjadi kuning, dan untuk input lain hijau. Untuk melakukan ini, dalam gaya untuk komponen Input tambahkan satu baris lagi dan ia akan menjadi:

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

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

Tambahkan prop first kepada input pertama:

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

Dengan menggunakan rendering bersyarat yang diberikan dalam teori pelajaran, ubah suai kod penyelesaian untuk pelajaran sebelumnya supaya apabila prop warn hadir, teks butang menjadi merah dan latar belakangnya kuning, dan tanpanya - latar belakang hijau dan teks putih. Hantar warn kepada butang kedua.