composes command for files in CSS modules in React

The composes command can also be used to reuse styles from one file in another.

Let's go back to the buttons app we made in the previous tutorials. Let's say we want to give all the buttons the same shadow, cursor style, and bold font. Let's put these styles in the App.module.css file. Let's open this file and add a new beauty class to the top with these styles:

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

Let's apply it to styling the buttons. To do this, open Buttons.module.css and make changes to the common-btn class. We'll add a line with the composes command, where we'll specify the name of the beauty class we want to apply and the App.module.css file that contains this class:

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

Take your application code from the task in the previous lesson and make some shadow to your inputs using the method given in this lesson.