Komponensek speciális stílusozása Reactban

Tegyük fel, van egy React komponensünk Block, és létrehoztunk benne Styled Components segítségével stílusozott komponenseket: Button és 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;
`;

Most képzeljük el, hogy szükségünk van még egy Button komponensre, de fehér szöveggel és zöld háttérszínnel.

Ehhez elegendő, ha a meglévő Button komponensünk alapján létrehozunk egy új MdButton komponenst, és csak a módosítani kívánt tulajdonságokat írjuk bele:

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

Helyezzük el a Block komponensben az összes stílusozott komponensünket:

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

Задание 1

Hozz létre egy üres React komponenst Block1 névvel. Styled Components segítségével hozz létre benne egy stílusozott div-et, melynek szélessége és magassága 150px, a háttérszíne sárga, a széle vastagsága 2px. Nevezd el DIVA-nak.

Задание 2

Az előző feladat div komponense alapján hozz létre egy ugyanilyen div-et DIVB névvel, de zöld háttérszínnel és 3px vastag széllel.

Задание 3

A Block1 komponensben hozz létre egy Container div-et. Helyezz el benne két DIVA komponenst és közéjük egy DIVB komponenst, amelyeket az e leckéhez tartozó előző feladatokban hoztál létre.