Avanceret styling af komponenter i React

Antag at vi har en React-komponent Block og vi har oprettet stylede komponenter i den ved hjælp af Styled Components Button og 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;
`;

Og lad os nu forestille os, at vi har brug for endnu en komponent Button, kun med hvid knaptekst og grøn baggrund.

For at gøre dette er det nok for os at oprette en ny komponent MdButton baseret på vores Button-komponent og kun skrive de egenskaber, vi ønsker at ændre:

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

Lad os placere alle vores stylede komponenter i Block:

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