我想通过 props 改变 chakra theme.ts 中全局样式的背景

Question

我想更改每个页面的正文背景。
对于 pageA，我希望背景为白色，对于 pageB，我希望背景为灰色。
我已经在chakra ui的全局样式中设置了背景，并且我希望能够更改道具中的背景颜色。

// 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>

Answer 1

Chakra 在底层使用 Emotion，因此可以使用 EmotionGlobal标签为每个页面自定义背景，如下所示：

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

export const PageA: React.FC = () => {
  return (
    <>
      <Global styles={css`body { background-color: hotpink !important; }`} />
      Hello world!
    </>
  );
};