Chakra-UI 删除默认背景颜色答案

【问题标题】：Chakra-UI removing default background colorChakra-UI 删除默认背景颜色
【发布时间】：2022-02-20 02:00:16
【问题描述】：

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

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

【问题讨论】：

对于我的用例，我只是将一个组件（使用 Chakra）导入到我现有的应用程序中（它没有）。似乎我无法阻止脉轮“越界”该组件并改变〜一切。真气人。

标签： next.js tailwind-css chakra-ui

【解决方案1】：

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

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

当您使用脉轮的默认主题时会发生这种情况，它将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

【讨论】：