Paplašinātā komponenšu stilizēšana React

Pieņemsim, ka mums ir React komponents Block un mēs tajā esam izveidojuši ar Styled Components stilizētus komponentus Button un 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;
`;

Un tagad iedomāsimies, ka mums vajag vēl vienu komponentu Button, tikai ar baltu pogas tekstu un zaļu fona krāsu.

Lai to izdarītu, mums pietiek uz mūsu komponenta Button bāzes izveidot jaunu komponentu MdButton un tajā norādīt tikai tās īpašības, kuras mēs vēlamies mainīt:

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

Izvietosim Block visus mūsu stilizētos komponentus:

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