Χρήση Props με Styled Components στο React

Από το προηγούμενο μάθημα μάθαμε ότι τα styled components που δημιουργούνται με τη βιβλιοθήκη Styled Components μπορούν να χρησιμοποιηθούν ως συνηθισμένα React components. Σε αυτό το μάθημα, θα δούμε ότι εδώ τα props λειτουργούν με παρόμοιο τρόπο.

Ας υποθέσουμε ότι έχουμε ένα React component Block και δημιουργήσαμε μέσα σε αυτό styled components χρησιμοποιώντας τα Styled Components Input και Container:

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Ας τοποθετήσουμε τρία Input components μέσα στο Container:

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Χρησιμοποιώντας props, μπορούμε να ορίσουμε διαφορετικά attributes στα components. Ας ορίσουμε στο δεύτερο input τα attributes placeholder και type με τιμές name και text, αντίστοιχα, και στο τρίτο input για το attribute type ας ορίσουμε την τιμή password:

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

Δημιουργήστε ένα κενό React component Block, φτιάξτε μέσα σε αυτό ένα div που θα περιέχει τρία κουμπιά. Χρησιμοποιώντας τη βιβλιοθήκη Styled Components, δώστε στυλ σε αυτό το div και στα κουμπιά. Χρησιμοποιώντας props, απενεργοποιήστε το πρώτο κουμπί, και στο τρίτο κουμπί ορίστε τον τύπο reset.