Расширенная стилизатсияи компонентҳо дар 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-ро, ки шумо дар вазифаҳои қаблӣ ба ин дарс эҷод кардаед, ҷойгир кунед.