React හි සංරචක සඳහා දීර්ඝ විලාසිතාව

අපට React සංරචකයක් ඇතැයි උපකල්පනය කරන්න Block සහ අපි එහි Styled Components භාවිතයෙන් විලාසිතා කළ සංරචක සාදා ඇත Button සහ 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;
`;

දැන් අපට තවත් සංරචකයක් අවශ්‍ය බව කල්පනා කරමු Button, නමුත් කෙලින්ම බොත්තමේ සුදු පෙනෙන පෙළ සහ කොළ පසුබිම සමඟ.

මේ සඳහා අපගේ සංරචකය මත පදනම්ව ප්‍රමාණවත්ය Button නව සංරචකයක් සාදන්න MdButton සහ එහි අපට අවශ්‍ය ගුණාංග පමණක් ලියන්න වෙනස් කිරීමට:

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

Block හි සියලුම ස්ථානගත කරමු විලාසිතා කළ සංරචක:

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