当我 运行 'npm run build'、'npm run start' 但其他人无法重现错误时，组件丢失 类

Question

Here's the repo。

只是 the example provide by Material-UI 在 pages/index.tsx

中增加了一个额外的输入组件

当我在本地机器或 VPS 上 运行 npm run build npm run start 时，输入组件的轮廓显示如下：

标签出现在输入上方，而它应该出现在输入内部。这样做的原因是因为它缺少必要的 classes。具体来说，它缺少负责在正确位置显示标签的 class：

.MuiInputLabel-formControl {
    top: 0;
    left: 0;
    position: absolute;
    transform: translate(0, 24px) scale(1);
}

我认为这是 Material-UI 的问题，所以我 created an issue in their repo，但是当其他人遵循完全相同的步骤时，似乎没有人可以重现此错误。这是他们看到的：

我只有在以下情况下才能让它工作：

• 运行 它处于开发模式 (npm run dev)
• 在 <Component> 组件之外添加 pages/_app.tsx 中的组件
• 将其部署到 Now.sh，这需要 next.config.js
中的无服务器配置

我真的不明白这是什么问题。我在我的 VPS 和本地计算机上安装的唯一其他软件包是 npm@6.9.0，因此似乎不是应用程序外部的任何东西导致了问题。

我删除了 node_modules 文件夹和 package-lock.json 并重新安装了所有内容，我又删除了 .next 文件夹和 运行 npm run build 以重建它，但问题仍然出现。我还尝试 运行 在不同的浏览器和隐身模式下使用该应用程序。什么都解决不了。

还有什么可能导致此问题？我完全卡住了，找不到任何其他可以帮助解释它的类似问题。

编辑：我知道如何通过将那些 class 属性直接添加到组件本身来解决这个问题。我正在寻找关于可能导致此问题的原因的解释，因此我不需要使用 hack 来修复它。

Answer 1

我遇到了一个与您的问题相似的问题，当我尝试使用 material-ui 制作我的应用程序的生产版本时，样式全都乱七八糟。我设法通过添加 JSS Provider:

来解决

import JssProvider from "react-jss/lib/JssProvider";

class App extends Component {
  render() {
    <JssProvider>
      *the rest of your material-ui components*
    </JssProvider>
  }
}

你试过这样的东西吗？

Answer 2

不要使用 Next.js 8.1.0 而是使用 8.1.1-canary.51（从 1 到 51，最新的是 51） 这是 issue