Will having a top level "use-client" theme provider make my whole app be part of the client bundle
Answered
Giant Angora posted this in #help-forum
Giant AngoraOP
Hey all,
I am using next 13 and have the following theme component
which is then imported into my root layout
Does this mean that my
I have seen some posts saying that if sever components are in the
Thanks!
I am using next 13 and have the following theme component
'use client';
import * as React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import CssBaseline from '@mui/joy/CssBaseline';
import NextAppDirEmotionCacheProvider from './EmotionCache';
import theme from './theme';
const ThemeRegistry = ({
children,
}: {
children: React.ReactNode;
}): JSX.Element => {
return (
<NextAppDirEmotionCacheProvider options={{ key: 'joy' }}>
<CssVarsProvider modeStorageKey="joy-mode" theme={theme}>
<CssBaseline />
{children}
</CssVarsProvider>
</NextAppDirEmotionCacheProvider>
);
};
export default ThemeRegistry;which is then imported into my root layout
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}): JSX.Element {
return (
<html lang="en">
<body className={inter.className}>
<ThemeRegistry>
<div className="layout-container">
<div className="left-nav">
<MenuDrawer />
</div>
<div className="below-banner">
<div className="banner">
<Banner />
</div>
<div className="main-content">{children}</div>
</div>
</div>
</ThemeRegistry>
</body>
</html>
);
}Does this mean that my
<MenuDrawer /> and <Banner /> will render as client components even though they are not. I have seen some posts saying that if sever components are in the
{children} of the client component, then they will still be treated as sever components. But I can't find this in the react docs so any links would be much appreciated. Thanks!