Προχωρημένη Στυλιστική Σχεδίαση Στοιχείων στο React

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

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

const Button = styled.input`
	background-color: orange;
	font-size: 18px;
	margin: 5px;
`;

Τώρα ας φανταστούμε ότι χρειαζόμαστε ένα ακόμη στοιχείο Button, αλλά με λευκό χρώμα κειμένου και πράσινο φόντο.

Για να το επιτύχουμε αυτό, αρκεί να δημιουργήσουμε πάνω στη βάση του στοιχείου μας Button ένα νέο στοιχείο MdButton και να ορίσουμε σε αυτό μόνο τις ιδιότητες που θέλουμε να αλλάξουμε:

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

Ας τοποθετήσουμε στο Block όλα τα στοιχεία με στυλ που δημιουργήσαμε:

function Block() {
	return (
		<Container>
			<Button>btn0</Button>
			<MdButton>btn1</MdButton>
		</Container>
	);
}

Δημιουργήστε ένα κενό React στοιχείο Block1. Χρησιμοποιώντας Styled Components δημιουργήστε μέσα σε αυτό ένα div με στυλ, πλάτος και ύψος 150px, κίτρινο φόντο, και πάχος περιγράμματος 2px, ονομάστε το DIVA.

Πάνω στη βάση του div από την προηγούμενη άσκηση δημιουργήστε ένα παρόμοιο div DIVB, αλλά με πράσινο φόντο και πάχος περιγράμματος 3px.

Στο Block1 δημιουργήστε ένα div Container. Τοποθετήστε μέσα σε αυτό δύο στοιχεία DIVA και ανάμεσά τους ένα DIVB, που δημιουργήσατε στις προηγούμενες ασκήσεις αυτού του μαθήματος.