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

අපට React සංරචකයක් ඇතැයි උපකල්පනය කරන්න Block සහ අපි එහි Styled Components භාවිතයෙන් විලාසිතා කළ සංරචක සාදා ඇත Button සහ Container:

const 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 සහ එහි අපට අවශ්‍ය ගුණාංග පමණක් ලියන්න වෙනස් කිරීමට:

const MdButton = styled(Button)`
	color: white;
	background-color: green;
`;

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

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

හිස් React සංරචකයක් සාදන්න Block1. Styled Components භාවිතයෙන් සාදන්න එහි පළල සහ උස සහිත විලාසිතා කළ div එකක් 150px, කහ පසුබිම, සහ මායිම් පළල 2px, එය නම් කරන්න DIVA.

පෙර කාර්යයෙන් div මත පදනම්ව සාදන්න එකම div DIVB, නමුත් කොළ පැහැති පසුබිම සහ 3px මායිම් පළල සමඟ.

Block1 හි div එකක් සාදන්න Container. එහි සංරචක දෙකක් තබන්න DIVA සහ ඒවා අතර එක් DIVB, ඔබ විසින් සාදන ලද මෙම පාඩමට පෙර කාර්යයන්හිදී.