A quick recap: we know that when CSS is applied as modular CSS, the

class names are changed at the compile-time and are randomized in a way that creates no conflict with CSS used in a different module of your project.

Now, let’s deep dive into some of the common questions that a beginner faces

while using CSS modules.

How can we apply two class names at the same time?

Well, this question has a simple answer. You can just write the below syntax to

add 2 class names.

<​button​ ​className​ = {`${​ styles​.submitButton​} ${​styles​.outlinedButton​}`} />

Module CSS file:

.submitButton​ {
  color​ : #008080​ ;
  background-color​: white​;
}
.outlinedButton​ {
  border-color​: #008080​;
}

#react #reactjs #css-modules #css