NextJS is it possible to combine module specific and global styling?

user_6800988 0
Viewed 890

E.g. how could I style a component with both the class "module" from the module specific css and the class "global" from the global css?

<p className={styles.module}>Hello World!</p>
<p className={global}>Hello World!</p>

I imagine it like this:

<p> className={styles.module, global}>Hello World!</p>
next.js
3 Answers

Yes you can combine both:

For global CSS, you add it in pages/_app.js file like this:

import '../styles.css'

For component level CSS you can add it in your component file like this:

import styles from './Component.module.css'

Let's imagine that these CSS files content is:

/* style.css */
.classFromGlobalCSS {
  color: white;
}

/* Component.module.css */
.classFromComponentCSS {
  background-color: black;
}

Then in your component you can use this to put styling from both sources on the same paragraph:

<p className={`classFromGlobalCSS ${styles.classFromComponentCSS}`}>
  Hello World!
</p>

You can find more information on the built in CSS support documentation.

user_17743320

The easies way is to use template literals:

<p className={`${styles.module} ${global}`}>Hello World!</p>

For more complex usage you can use clsx module.

user_14894870

I'm using NextJS with Tailwind CSS which may met the same problem.

In my case I spread the classNames into an array and use .join(' ') to merge them into a single string.

<p className={[styles.module, global.text, 'px-3 py-3'].join(' ')}>Hello World!</p>
user_80800560
Related