React에서 CSS 모듈의 파일 간 composes 명령

composes 명령을 사용하여 한 파일의 스타일을 다른 파일에서 재사용할 수도 있습니다.

이전 강의에서 작업한 buttons 애플리케이션으로 돌아가겠습니다. 모든 버튼에 동일한 그림자, 커서 스타일 및 굵은 글꼴을 추가하고 싶다고 가정해 보겠습니다. 이 스타일은 App.module.css 파일에 위치하도록 하겠습니다. 이 파일을 열고 시작 부분에 이러한 스타일을 가진 새로운 클래스 beauty를 추가해 보겠습니다:

.beauty { 
	box-shadow: rgba(50, 50, 50, 0.2) 0 5px 5px 0;
	font-weight: bold;
	cursor: pointer;
}

이제 버튼을 스타일링하기 위해 적용해 보겠습니다. 이를 위해 Buttons.module.css를 열고 common-btn 클래스를 수정하겠습니다. composes 명령과 함께 사용하려는 클래스 beauty의 이름과 해당 클래스가 위치한 파일 App.module.css를 지정하는 줄을 추가하겠습니다:

.common-btn {
	composes: beauty from "../App.module.css"; 
	font-size: 16px;
	border-radius: 3px;
}

이전 강의의 과제에서 가져온 애플리케이션 코드를 사용하여 이 강의에서 설명한 방법을 활용해 입력 필드에 그림자를 추가해 보세요.