NextUI+NextJS配置自定义主题,并且不会出现由默认主题到自定义主题的过渡闪烁

07-09
评论
字数统计:1592(字)
刚接触到NextUI时,这个坑确实很棘手。配置完自定义主题后,刷新页面会有一个明显的过渡闪烁,还是会先展示出默认主题,然后过渡到自定义主题上。解决方案是使用next-themes,这个方案官方并没有提及,我也是扒了很多国外的源码才发现。

代码

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协议 许可协议。转载请注明出处!

评论

正在加载评论...

©2022 Crazylei Bolg沪ICP备20001821号