当我运行“ 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时，概述的输入组件如下所示：

标签显示在输入上方，而标签则应显示在输入内部。这样做的原因是因为它缺少基本类。具体来说，它缺少负责在正确位置显示标签的此类：

.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）
• 在pages/_app.tsx组件之外的<Component>中添加组件
• 将其部署到Now.sh，它需要next.config.js中的无用配置

我真的不明白问题是什么。我在VPS和本地计算机上安装的唯一其他软件包是npm@6.9.0，因此看来该应用程序外部没有任何问题。

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

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

编辑：我知道如何通过将那些类属性直接添加到组件本身中来解决此问题。我一直在寻找有关可能首先导致此问题的原因的说明，因此我不需要使用黑客来解决它。

Answer 1

请勿使用Next.js 8.1.0，而应使用8.1.1-canary.51（从1到51，最新值为51） 这是issue

Answer 2

我遇到了一个看起来与您相似的问题，当尝试使用我的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>
  }
}

您尝试过这样的事情吗？