in NextJs how do I remove global styles declared in _app in a specific component?

Question

I'm using NextJs and I'm using TailwindCSS and I've got a bunch of extra styles in my globals.css which is imported in the _app at the top level as you are supposed to do. I tried moving it down into my "layout" component, but it gave the error to put it back to the top, so I kept it there.

Here is the problem. I've got one component where I don't want any of the globals.css styles, only one small set of alternate styles. Is there any way to do this? I want to remove all the crap I'm forced to import at the top level and then just apply a specific stylesheet to that component.

Answer 1

One way you can achieve this is by using a not selector in your globals.css styles.

For eg add className="no-global-styles" (to the component you don't need the global styles)

and then appending the global style selectors with:not(.no-global-styles) selector

:not(.no-global-styles) > a {
     color: black;
     text-decoration: none;
     cursor: pointer;
}

This will apply to all <a?> elements except the ones inside the class '.no-global-styles' and <a?> inside '.no-global-styles' will have default styles or the next styles applied. Another way I can think of is by using.important flag and overriding the globals.css styles.

(link for selectors) https://www.w3schools.com/cssref/css_selectors.asp

(link for:not() tricks) https://css-tricks.com/almanac/selectors/n/not/

I have a feeling that this is not the best way to do but if you have few styles that you want to ignore then this case should not be a problem.