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

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

Block.jsconst 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 και να ορίσουμε σε αυτό μόνο τις ιδιότητες που θέλουμε να αλλάξουμε:

Block.jsconst MdButton = styled(Button)`
  color: white;
  background-color: green;
`;

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

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