Material UI Icons 页面刷新后无法渲染问题该如何解决？

• 解决hydration类名不匹配问题
  同时使用Material UI与styled-components时，服务端和客户端生成的类名不一致是最常见的失效原因。请确认_document.js/_document.tsx中同时完成了两类样式的服务端收集逻辑，参考配置如下：

  import Document, { Html, Head, Main, NextScript } from 'next/document'
  import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'
  import { ServerStyleSheets as MaterialUiServerStyleSheets } from '@mui/styles'
  
  export default class MyDocument extends Document {
    static async getInitialProps(ctx) {
      const styledComponentSheet = new StyledComponentSheets()
      const materialUiSheets = new MaterialUiServerStyleSheets()
      const originalRenderPage = ctx.renderPage
  
      try {
        ctx.renderPage = () =>
          originalRenderPage({
            enhanceApp: App => props =>
              styledComponentSheet.collectStyles(
                materialUiSheets.collect(<App {...props} />)
              )
          })
  
        const initialProps = await Document.getInitialProps(ctx)
        return {
          ...initialProps,
          styles: [
            <React.Fragment key="styles">
              {initialProps.styles}
              {materialUiSheets.getStyleElement()}
              {styledComponentSheet.getStyleElement()}
            </React.Fragment>
          ]
        }
      } finally {
        styledComponentSheet.seal()
      }
    }
  
    render() {
      return (
        <Html>
          <Head>
            <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      )
    }
  }
  

• 优先使用SVG图标规避字体加载问题
  你当前使用的是字体格式的Material Icons，页面刷新时如果字体加载晚于DOM渲染，就会出现图标不展示的问题。推荐安装@mui/icons-material包直接使用SVG格式图标，完全规避字体加载时序问题：
  安装命令：npm install @mui/icons-material @mui/material @emotion/react @emotion/styled
  使用示例：

  import HomeIcon from '@mui/icons-material/Home'
  
  function MyComponent() {
    return <HomeIcon fontSize="small" />
  }
  

• 优化字体图标加载配置
  如果你需要保留字体图标方案，可以修改_document中的图标资源引入配置，添加预加载逻辑提前触发资源下载：

  <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  </noscript>
  

  同时在全局CSS中添加如下配置，避免字体加载完成前显示乱码：

  .material-icons {
    font-display: block;
  }
  

• 调整样式注入优先级
  确认_app.js/_app.tsx中已引入MUI的CssBaseline组件重置全局样式，并且配置styled-components的注入优先级高于MUI，避免图标样式被其他样式覆盖。

内容的提问来源于stack exchange，提问作者n3n3