Stylisation avancée des composants dans React

Supposons que nous ayons un composant React Block et que nous y ayons créé des composants stylisés à l'aide de Styled Components Button et 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;
`;

Imaginons maintenant que nous ayons besoin d'un autre composant Button, mais avec un texte de bouton blanc et un fond vert.

Pour cela, il nous suffit de créer un nouveau composant MdButton basé sur notre composant Button et d'y spécifier uniquement les propriétés que nous souhaitons modifier :

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

Plaçons dans Block tous nos composants stylisés :

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