Uitgebreide Stilering van Komponente in React

Veronderstel ons het 'n React-komponent Block en ons het daarin gestileerde komponente geskep met behulp van Styled Components: Button en 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;
`;

En stel jou nou voor dat ons nog 'n komponent Button nodig het, maar met wit teks vir die knoppie en 'n groen agtergrond.

Hiervoor is dit voldoende om op grond van ons komponent Button 'n nuwe komponent MdButton te skep en daarin slegs die eienskappe te spesifiseer wat ons wil verander:

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

Plaas al ons gestileerde komponente in Block:

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