Chakra-UI 删除默认背景颜色

Question

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

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

我认为这是因为 chakra 的默认主题？我该如何禁用它？

Answer 1

如果其他人也遇到此问题，您可以在扩展主题选项中将 bg 设置为空字符串：

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

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

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