react I want to change the background of globalstyle in chakra theme.ts by props

Question

I want to change the background of the body for each page.
For pageA, I want the backgroud to be white, and for pageB, I want the background to be gray.
I have set the background in the global style of chakra ui, and I want to be able to change the background color in props.

// theme.ts
import { extendTheme } from '@chakra-ui/react';

export const theme = extendTheme({
  styles: {
    global: {
      'html, body': {
        color: 'black',
        background: 'white',
      },
    },
  },
});

_app.tsx

user_1317406 · Answer

Chakra is using Emotion under the hood, so the background can be customized for each page using Emotion's Global tag as follows:

// pageA.tsx
import { Global, css } from '@emotion/react';

export const PageA: React.FC = () => {
  return (
    <>
      
      Hello world!
    
  );
};

react I want to change the background of globalstyle in chakra theme.ts by props

1 Answers