yarn add next-themes
// _document.tsx
class MyDocument extends Document {
static async getInitialProps(ctx: any) {
const initialProps = await Document.getInitialProps(ctx);
const styles = extractCritical(initialProps.html);
return {
...initialProps,
styles: (
<>
{initialProps.styles}
<style data-emotion-css={styles.ids.join(' ')} dangerouslySetInnerHTML={{ __html: styles.css }} />
</>
)
};
}
render() {
return (
<Html lang="en">
<Head>
<meta httpEquiv="Content-Security-Policy" content="upgrade-insecure-requests" />
{CssBaseline.flush()}
</Head>
<body style={{ background: '#f8fafc' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
// _app.tsx <NextThemeProvider></NextThemeProvider>
import { ThemeProvider as NextThemeProvider } from 'next-themes';
return (
<>
<Head>
<link rel="icon" href="/favicon.ico" />
</Head>
<NextThemeProvider attribute="class" value={{ light: lightTheme.className }}>
<NextUIProvider>
<Provider store={store}>
<Toaster />
{renderPage()}
</Provider>
</NextUIProvider>
</NextThemeProvider>
</>
);
本文链接:https://blog.crazylei.com/art/24283bb9
版权声明: 本博客所有文章除特别声明外,均采用CC BY 4.0 CN协议 许可协议。转载请注明出处!
正在加载评论...