CODEWITHSUNDEEP
reactjsnext.jschakra-ui
user16590865
user16590865

Reputation:

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

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
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

Upvotes: 5

Views: 1832

Answers (1)

Samuli Asmala
Samuli Asmala

Reputation: 2381

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 (
    <>
      <Global styles={css`body { background-color: hotpink !important; }`} />
      Hello world!
    </>
  );
};

Upvotes: 2

Related Questions