Gatsby: How to use both global style and component-scoped style simultaneously?

[hatakawas]

Summary

I have Two Questions:

• How to use both global style class and component-scoped style simultaneously?
• How to use multiple global styles or multiple component-scoped styles simultaneously?

I have read the official docs, googled it, but faild to find the answers.
Please help.

Relevant information

Question 1
How to use both global style class and component-scoped style simultaneously?
like:

import "./layout.css"
import styles from "./hero.module.scss"
...
<section className={`hero is-medium`  styles.backgroundImage}>
...
</section>

Question 2
How to use multiple global styles or multiple component-scoped styles simultaneously?
like:

import "./layout.css"
import styles from "./hero.module.scss"
...
<section className={styles.backgroundImage styles.fonts}>
...
</section>

[pieh]

Be very cautious with applying multiple classes like that when using css modules. CSS modules are meant to not mix classes, so you might hit issues when trying to combine multiple classes like that.

With that said - technically you can do that it like that:

1. Use syntax like this:

import "./layout.css"
import styles from "./hero.module.scss"
...
<section className={`hero is-medium ${styles.backgroundImage}`}>
...
</section>

2.

import "./layout.css"
import styles from "./hero.module.scss"
...
<section className={`${styles.backgroundImage} ${styles.fonts}`}>
...
</section>

This is using https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals that using backticks to declare a string and ${something} to insert "variables" inside