Search code examples
next.jstailwind-csschakra-ui

Chakra-UI removing default background color

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. This worked before I switched to chakra so I suppose this is something to do with it.

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?

Solution

  • If this issue is being faced by anyone else, you can set the bg to an empty string in the extendTheme options:

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

    This occurs when you use chakra's default theme, which sets the style of the body-bg to global: https://github.com/chakra-ui/chakra-ui/blob/78d9c30e6b9477080c75b2e601394a21ed93fcf2/packages/theme/src/styles.ts#L8

    For more info, check this discussion: https://github.com/chakra-ui/chakra-ui/discussions/4926