How to remove the default theme applied by Chakra UI?

[FC5570]

Hello. I hope this is the right place to ask this type of question.

I'm using @chakra-ui/react with Tailwind CSS and NextJS. I have set my background color to black in my globals.css file:

body {
    background-color: black;
}

But I don't see the black color being applied, I only see a white screen with the content.

This is my app.js file:

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

I assume this is because of chakra's default theme? How would I disable it?

Thank you!

[no-yan]

The reason is that chakra UI has body-bg style to global in the default theme. You can override this with the following code
https://codesandbox.io/s/zeta-heading-size-issue-forked-w4xn8?file=/src/index.js

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

[Suvraneel]

Perfect ... GG 🔥

[schkolne]

worked for me when i wrote "background" instead of "bg"

[tombohub]

is there a script or something to remove all of the styling?

[CalculusCoder]

Worked for me! Thanks, been tackling this for hours

[dprcold]

Thank you!

[TanBeige]

How can you remove all of the default theme though? I have a project that already uses its own CSS and we are starting to integrate Chakra but it is messing up some layouts. If there's a way to import specific components from Chakra as well that would be beneficial.

[PabloVMartins]

I passed the resetCSS={false} prop in chakraProvider, and it solved my problem with CSS.

[OxBryte]

i need help pls
been having issues with chakra lately
first is what i'm working on needs me to downgrade react to aparticular version so i have to downgrade chakra also
and i'm using chakra v1.1.0 at the moment
so whenever i host the project on vercel i get this error and i have tried everything still same
here is an image

[JayJ-WeCode]

Have you found a solution to this problem?

[OSAMA263]

this is if u want to diable the theme

delete theme.styles.global;
export default App() {
  return (
   <ChakraProvider theme={theme} resetCSS={false} disableGlobalStyle={true}>
      {* your content *}
   </ChakraProvider>
  );
}

[sbbeez]

I wasnt using any theming capabilities of chakra-ui,

so just setting disableGlobalStyle in <ChakraProvider>{children}</ChakraProvider> help fix the issue.