Avancerad styling av komponenter i React

Anta att vi har en React-komponent Block och vi har skapat stiliserade komponenter i den med hjälp av Styled Components Button och 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;
`;

Och nu föreställ dig att vi behöver ytterligare en komponent Button, bara med vit knapptext och grön bakgrund.

För att göra detta räcker det för oss att skapa en ny komponent MdButton baserad på vår Button-komponent och bara skriva in de egenskaper vi vill ändra:

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

Låt oss placera alla våra stiliserade komponenter i Block:

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