消除默认背景色的Chakra-UI

Question

我使用@chakra/使用尾风、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

我想这是因为脉轮的默认主题吧？我怎么才能让它失效？

Answer 1

如果其他任何人都面临此问题，您可以在extendTheme选项中将bg设置为空字符串：

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

这发生在您使用脉轮的默认主题时，该主题将body-bg的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