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인 스타일링된 div를 만들고 이름을 DIVA로 지정하세요.

이전 작업의 div를 기반으로 녹색 배경과 3px 테두리 너비를 가진 동일한 div DIVB를 생성하세요.

Block1에 Container div를 만드세요. 이전 작업에서 생성한 두 개의 DIVA 컴포넌트와 그 사이에 하나의 DIVB 컴포넌트를 배치하세요.