此问题可能是由Next.js中的服务器端呈现（SSR）过程问题引起的。最初在服务器上呈现页面时，它无法访问客户端JavaScript，这可能导致无法应用来自Material-UI的样式。在客户端上重新呈现页面时，将应用样式，因为客户端JavaScript可用。
要解决这个问题，你可以尝试在React.useEffect钩子中 Package 你的组件，并设置一个状态标志，当组件装载到客户端时触发重新呈现。这将确保在初始呈现期间应用样式。
下面是一个例子：

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时使用此快捷方式。

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