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-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
我将@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-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