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

正在加载评论...

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

代码

评论

相关推荐

NextUI警告If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility

NextJs + Typescript4 脚手架