composes command for classes in CSS modules in React

In this lesson we will look at a very useful technique for reusing CSS styles from one class in another in CSS modules.

Let's go back to the buttons app we made in previous lessons. Let's take a look at the Buttons.module.css file:

.btn1 {
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Let's say we want all buttons to have the same rounding and font size. We could, of course, just spawn the same properties in each class. But thanks to the composes command from CSS modules, we'll do it differently.

First, let's create another class, for example common-btn, in which we'll place these identical properties. And to apply properties from this class to others, you need to use the syntax in them:

selector {
	composes: class name;
}

Now the code of our Buttons.module.css will look like this:

.common-btn {
	font-size: 16px;
	border-radius: 3px;
}

.btn1 {
	composes: common-btn;
	background-color: orange;
	border: 2px solid brown;
	color: white;
}

.btn2 {
	composes: common-btn;
	background-color: red;
	border: 2px solid green;
	color: yellow;
}

.btn3 {
	composes: common-btn;
	background-color: brown;
	border: 2px solid yellowgreen;
	color: orange;
}

Take your React app inputs that you made in the tasks for the previous lessons. Add a couple of identical CSS styles with the same values for all inputs. Create an additional class in which these styles will be written. Using composes, replicate them across all other input classes.