个人中心
gpt4 book ai didi

reactjs - Nextjs css 闪烁

转载 作者：行者123 更新时间：2023-12-04 15:09:29 33 4
gpt4 key购买 nike

我正在使用 Material ui 和 nextjs 构建一个 react 应用程序。我正在使用 <Autocomplete />组件，由 Material UI 提供，并用我自己的样式覆盖它的一些样式，如下所示:

<Autocomplete
  classes={{
    root: `${styles[`search__autocomplete`]} ${
      styles[`search--${variant}__autocomplete`]
    }`,
    inputRoot: `${styles[`search__autocomplete-input`]} ${
      styles[`search--${variant}__autocomplete-input`]
    }`
  }} 
/>
variant是一个 Prop ，它被传递给组件和 styles是一个从 css 模块导入的变量: import styles from "Search.module.sass" .
现在，当我在本地工作时，一切看起来都很棒:
expected
但是，在我通过 next build && next export 将它部署到生产环境之后当大约 1/3 秒我的页面看起来像这样时，我开始体验“闪烁”效果:
enter image description here
我的猜测是，这可能与 nextjs 将我的 css 导出到生产中的几个文件这一事实有关: 
    <link
      rel="preload"
      href="/_next/static/css/4dcd7fa805fb41261f08.css"
      as="style"
    />
    <link
      rel="stylesheet"
      href="/_next/static/css/4dcd7fa805fb41261f08.css"
      data-n-g=""
    />
    <link
      rel="preload"
      href="/_next/static/css/a23cf79bceae4047fddb.css"
      as="style"
    />
    <link
      rel="stylesheet"
      href="/_next/static/css/a23cf79bceae4047fddb.css"
      data-n-p=""
    />
我该如何解决？

最佳答案

解决方案是创建一个自定义 pages/_document.js页面:

import React from 'react';
// Modules
import Document, { Html, Head, Main, NextScript } from 'next/document';
// MUI Core
import { ServerStyleSheets } from '@material-ui/core/styles';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>

          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side rendering (SSR).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () => originalRenderPage({
    enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
  });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

export default MyDocument;

关于reactjs - Nextjs css 闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65452514/

33 4 0
文章推荐： visual-studio - 通用 Windows 平台的预处理器定义？
文章推荐： android - Android AAR 文件是否仅在构建过程中使用？
文章推荐： javascript - 关于在 firebase 云函数中 promise 的 then 回调中返回空值的问题
文章推荐： haskell - Haskell 中 Hangman 的错误递归
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com