Documentation on the use of ChakraBaseProvider

Subject

ChakraBaseProvider

Description

The actual documentation about ChakraBaseProvider says:

import { ChakraBaseProvider, extendBaseTheme } from '@chakra-ui/react'
// `@chakra-ui/theme` is a part of the base install with `@chakra-ui/react`
import chakraTheme from '@chakra-ui/theme'

const { Button } = chakraTheme.components

const theme = extendBaseTheme({
  components: {
    Button,
  },
})

function App() {
  return (
    <ChakraBaseProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraBaseProvider>
  )
}

It says // @chakra-ui/theme is part of the base installation with @chakra-ui/react, but if the theme is already imported when you import @chakra-ui/react, why not use it to import the base theme?

I propose the following:

import { theme as chakraTheme, ChakraBaseProvider, extendBaseTheme } from "@chakra-ui/react"

const { Grid, GridItem, Heading } = chakraTheme.components
const theme = extendBaseTheme({
    components: { Grid, GridItem, Heading }
})

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
        <ChakraBaseProvider theme={theme}>
            <App />
        </ChakraBaseProvider>
    </React.StrictMode>
)

I think it's much simpler and the most important, it works perfectly.

I suggest it because yesterday when I was about to use ChakraBaseProvider instead of ChakraProvider I found that it makes me install the @chakra-ui/theme package in the package.json even though it is already inside the @chakra-ui/react.

I found a bug too. I don't know if you want me to open a new issue but I will explain it here and feel free to change it to the place it belongs. With the above code proposal I have written Grid and GridItem and they are not being detected by the IDE because they are not inside the index.d.ts of the theme object.

I attach an image to you to see the error that appears in the editor (VSCode in my case)

It works perfectly but the types are doing this weird things and can confuse people.

chakra-ui / chakra-ui-docs

Documentation on the use of ChakraBaseProvider #1481

Subject

Description