How in React Modules Stylesheet to use with your styles?

Question

css

For example, I have a block

<div className="nav df fdc">

</div>

nav - I want to use only inside the module
df - this is a global class
fdc - also global

According to the idea, you can do it this way, but it doesn't work

<div className=`{st.nav} df fdc`>

</div>

In the documentation , an example of such use is also not described (

Answer 1

Global classes are usually exposed globally, for example in index.css and connected, for example, in index.js as:
import './index.css'
And CSS modules are stored next to the component code and the files themselves are named with the module suffix, for example Header.module.css. CSS modules are connected in the components themselves like this:
import styles from './Header.module.css'
And they are used like this:

<div className={`${styles.header} global-class-1 global-class-2`}></div>