The * selector in react/next.js

Question

I am currently working on my first website in react. In my main.module.css I have

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

Just typical css styling reset. But React returns the error:

Syntax error: Selector "*" is not pure (pure selectors must contain at least one local class or id)

Do you have any solution for that? I want to keep this styling reset instead of adding those three lines to every element i have.

Answer 1

You should not have styling reset in module.css file. Move this css reset to normal css file like index.css file.

Styling file with .module.css extensions are used to define the styling you can say local to a components. It means that if you import a module.css file in two different components, both components will have same styles with different class names. This one prevents overriding of styles.

Answer 2

That would go into global styles, which can be done by simply adding:

require('./name-of-your-global-style.css');