การกำหนดสไตล์ขั้นสูงให้กับคอมโพเนนต์ใน 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 หนึ่งตัว ที่คุณสร้างขึ้น ในงานก่อนหน้าของบทเรียนนี้