New CacheProvider for the nextjs app directory setup changes my pro theme #1432
Description
Description
Hello all,
I appreciate all the efforts that have been made to get this awesome UI to work with the nextjs 13 app directory setup. My application setup is with the new app directory only. It is a brand new application.
My issue issue is, when I add the CacheProvider per docs, my pro theme changes. Most noticeably with its borders in dark mode.
Here is an example of the pro theme component I am using
Here is how it looks like on my local dev page (notice the borders)
and I can get rid of the borders if I take the <CacheProvider> off but I know thats not right :)
Here is my setup (@myapp/ui is a local npm workspace that I import as package but it is full chakra)
app/layout.tsx
'use client'
import { Chakra } from '@myapp/ui'
import SWRConfig from '../src/providers/swrProvider'
export default function RootLayout({
// Layouts must accept a children prop.
// This will be populated with nested layouts or pages
children,
}: {
children: React.ReactNode
}): React.ReactNode {
return (
<html lang="en">
<head />
<body>
<SWRConfig>
<Chakra>{children}</Chakra>
</SWRConfig>
</body>
</html>
)
}here is Chakra from @Myapp/ui
'use client'
import { ReactNode } from 'react'
import { CacheProvider } from '@chakra-ui/next-js'
import { ChakraProvider } from '@chakra-ui/react'
// import chakraTheme from './themeProvider'
import { theme as proTheme } from '@chakra-ui/pro-theme'
interface Props {
children: ReactNode
}
export const Chakra = (props: Props): JSX.Element => {
return (
<>
<CacheProvider>
<ChakraProvider theme={proTheme}>{props.children}</ChakraProvider>
</CacheProvider>
</>
)
}I am not sure why it is happening and I'd greatly appreciate some input on this.
Thank you!