კომპონენტების გაფართოებული სტილიზაცია 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-ის გამოყენებით შექმენით მასში სტილიზებული დივი სიგანეში და სიმაღლეში 150px, ყვითელი ფონით, და საზღვრის სიგანე 2px, დაარქვით მას DIVA.

წინა ამოცანის დივის საფუძველზე შექმენით იგივე დივი DIVB, მაგრამ მწვანე ფონით და საზღვრის სიგანით 3px.

Block1-ში შექმენით დივი Container. განათავსეთ მასში ორი კომპონენტი DIVA და მათ შორის ერთი DIVB, რომლებიც თქვენ შექმენით ამ გაკვეთილის წინა ამოცანებში.