MUI 样式在初始加载时未正确显示答案

【问题标题】：MUI styles not getting showed properly on the initial loadMUI 样式在初始加载时未正确显示
【发布时间】：2023-02-03 06:46:51
【问题描述】：

我正在为我的一个项目使用 MUI，并且我已经开始面对这些问题。在我的生产应用程序初始加载时，似乎没有应用 mui 样式。举些例子：

开关组件未正确显示
即使我使用了 sx 道具，按钮组件加载时也没有填充/边距。虽然当我使用 style 而不是 sx 时它们可以工作。
上下文菜单也加载了不正确的样式。当我刷新页面时，所有样式都会得到修复。
我该如何解决这个问题？

【问题讨论】：

不知道没有某种MRE 会发生什么，我们所能做的就是在黑暗中刺一刀。
嘿@JacobSmit 即使我不确定出了什么问题。对于某些 MUI 组件，它可以工作，但对于其中一些组件，则不能。想知道其他人是否也面临这个问题？
你在使用 Next.js 吗？
@Yannick 不 .. 它的 reactjs
@kaushalendrapandey 创建了一个具有相同问题的小回购，在这里分享。要么你在娱乐中没有问题，你可以找出区别，要么你有问题，我们可以看看代码/构建。否则我们只会玩 20 个问题。

标签： javascript css reactjs material-ui mui5

【解决方案1】：

此问题可能是由 Next.js 中的服务器端渲染 (SSR) 进程问题引起的。当页面最初在服务器上呈现时，它无法访问客户端 JavaScript，这可能导致无法应用来自 Material-UI 的样式。当页面在客户端重新呈现时，将应用样式，因为客户端 JavaScript 可用。

要解决此问题，您可以尝试将组件包装在 React.useEffect 挂钩中，并设置一个状态标志，以便在组件安装到客户端时触发重新渲染。这将确保在初始渲染期间应用样式。

这是一个例子：

    import { useState, useEffect } from "react";

const MyComponent = () => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  return (
    <div>
      {mounted ? (
        <MyStyledComponent />
      ) : (
        <div>Loading...</div>
      )}
    </div>
  );
};

export default MyComponent;

或者，您可以在应用类名时使用此快捷方式。

className={`${mounted && classes.your_element_class}`}

【讨论】：