3

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?

Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How do I use impure selectors in CSS modules? I get this error Syntax error: Selector ":root" is not pure (pure selectors must contain at least one local class or id)
If you use it as a module, you can't use :root selector. use it as a regular css module

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.