Chakra-UI 移除默认背景色

Chakra-UI removing default background color

我将@chakra-ui/react 与 Tailwind CSS 和 NextJS 一起使用。我在 globals.css 文件中将背景颜色设置为 black

body {
    background-color: black;
}

但是我没有看到应用黑色,我只看到白色屏幕。这在我切换到脉轮之前有效,所以我想这与它有关。

这是我的 app.js 文件:

import { ChakraProvider } from '@chakra-ui/react'
import 'tailwindcss/tailwind.css'
import '../styles/globals.css' // file which sets the body's background-color to black

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

我猜这是因为脉轮的默认主题?我该如何禁用它?

如果其他人遇到此问题,您可以在 extendTheme 选项中将 bg 设置为空字符串:

const theme = extendTheme({
  styles: {
    global: () => ({
      body: {
        bg: "",
      },
    }),
  },
});

当您使用 chakra 的默认主题时会发生这种情况,它将 body-bgstyle 设置为全局:https://github.com/chakra-ui/chakra-ui/blob/78d9c30e6b9477080c75b2e601394a21ed93fcf2/packages/theme/src/styles.ts#L8

有关更多信息,请查看此讨论:https://github.com/chakra-ui/chakra-ui/discussions/4926