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

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

  1. 开关组件未正确显示
  2. 即使我使用了 sx 道具,按钮组件加载时也没有填充/边距。虽然当我使用 style 而不是 sx 时它们可以工作。
  3. 上下文菜单也加载了不正确的样式。 当我刷新页面时,所有样式都会得到修复。

    我该如何解决这个问题?

【问题讨论】:

  • 不知道没有某种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}`}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-29
    • 1970-01-01
    • 1970-01-01
    • 2017-09-16
    • 1970-01-01
    • 2018-06-20
    • 2011-01-13
    相关资源
    最近更新 更多