Разширено стилизиране на компоненти в 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, създадени от вас в предишните задачи към този урок.