CODEWITHSUNDEEP
next.js
vanya
vanya

Reputation: 198

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

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>

Upvotes: 4

Views: 3344

Answers (3)

vozaldi
vozaldi

Reputation: 1067

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>

Upvotes: 1

Roman Mkrtchian
Roman Mkrtchian

Reputation: 2996

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.

Upvotes: 9

Ivan V.
Ivan V.

Reputation: 8081

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.

Upvotes: 2

Related Questions