I am creating a project using Next Js and recently I have run into a problem with my project as I have already created a global.css in it and I am trying to change the color of the background of only one specific page in it by going over the attributes set by the global.css since I already tried to change the background using the Chakra UI but you can still see the background set by the global.css underneath.

Is it possible to do this?

I am also using Chakra UI, and try to change the background using it. But you can still see the background stablished by the global.css underneath.

CodePudding user response：

1. create an _app file as described here (https://nextjs.org/docs/advanced-features/custom-app)

2. Detect which page you are on using the Next/Router (https://nextjs.org/docs/api-reference/next/router#userouter)

3. Create a wrapper and set the class based on page route.

4. Create CSS to set the bg accordingly.

Your _app should look something like this.

    const {asPath} = useRouter();
        

    const Page = asPath == '/' ? 'home-page' : '';
        

    return (
                <div className={Page}>
                    <Component {...pageProps} />
                </div>
            );

Hope this helps

Cheers!

CodePudding user response：

I'm a bit confused in your question but if i understood you right, and youre referring to the 'body' background color, then you can change that from your globals.css to transparent, then style the individual pages using javascript style.

or you can use css modules. (google that if you dont know it)