Chakra-UI删除默认背景色

Question

我使用@chakra-ui/react与顺风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

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

Answer 1

如果其他人正面临这个问题，您可以在extendTheme选项中将bg设置为空字符串:

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

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

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