Matumizi ya Props na Styled Components katika React

Kutoka kwa somo lililopita tulijifunza kuwa vilivyopangwa kwa kutumia maktaba ya Styled Components vinaweza kutumika kama vile vyengine vya React . Katika somo hili tutaona kuwa hapa kwa namna sawa pia yatafanya kazi.

Tukichukulia tuna kipengele cha React Block na tumetengeneza ndani yake vilivyopangwa kwa kutumia Styled Components Input na Container:

Block.jsconst Container = styled.div`
  display: flex;
  flex-direction: column;
  width: 150px;
`;

const Input = styled.input`
  margin: 5px;
  font-size: 18px;
`;

Weka viambatanishi vitatu Input ndani ya Container:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input />
      <Input />
    </Container>
  );
}

Kwa kutumia props, tunaweza kuweka katika viambatanishi sifa mbalimbali. Wacha tuweke kwenye kichujio cha pili sifa placeholder na type zenye maadili name na text, mtawalia, na kwa kichujio cha tatu kwa sifa type tuweke thamani password:

Block.jsfunction Block() {
  return (
    <Container>
      <Input />
      <Input placeholder="name" type="text" />
      <Input type="password" />
    </Container>
  );
}