CODEWITHSUNDEEP
reactjsnext.jscss-modules
Shugi Yen
Shugi Yen

Reputation: 171

Next.js different global css for a different set of components

So we bought a blog theme from themeforest. We plan to integrate it to our web app.

Our web app has its own global css, its imported on the _app component. Now, the blog theme also has it's own global css/ class names, ie it has its own margin, font, colors etc. Importing the blogtheme's global css to _app would mean that the two global css would clash.

Basically, the blog page should only use it's own global css. Other pages ie index page, about page, etc. should not use the blog's css

How do we setup our app so we could use two different global css in next js?

Upvotes: 3

Views: 2258

Answers (1)

felixmosh
felixmosh

Reputation: 35473

You have to options:

  1. Keep the blog styles global but add a prefix class to all of your blog css declaration, and load it as global from _app.js.

For example, add .blog class to all the theme css declaration. When rendering blog page add this blog class to your root page component.

  1. Make the blog styles a module, since you gonna implement the blog pages in React, you can import the styles as a module (by adding .module.css prefix to the styles & loading them from the blog page), more info

The benefit of the second method is that these styles will be loaded only when the user navigates to the blog pages.

Upvotes: 3

Related Questions