create-react-app / Material-UI App 样式在部署时不同

Question

我有一个错误，我不确定如何调试。错误是我通过material-ui和常规CSS用于create-react-app（Typescript）应用程序的样式在开发中显示得很好，但是当我在线部署应用程序时它对于某些CSS属性的显示不同（我只有试过 Heroku 和 Vercel）。当我开发时，该应用程序不会在控制台中显示任何错误或警告。我不知道为什么会这样，到目前为止我已经尝试了以下方法

1. 多次阅读我的代码，每一步都要格外小心。
2. 在 Chrome 85.0.4183.83（Linux，64 位）上以隐身模式打开网站（开发和生产）
3. 查看 material-ui 的文档 (material-ui.com) 和 React 文档，了解这方面的任何线索
4. 在 Google 上搜索以前的此类问题

到目前为止，什么都没有出现。有人可以指导我正确的方向吗？

部署后我在 Heroku 上使用的构建包是 mars 众所周知的构建包，可在 https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz 获得。

为方便起见，我已将我的 package.json here 包含在 pastebin 中。

非常感谢您的帮助。

============= 编辑 =============

我一直在试验代码，似乎问题在于在构建期间如何编译 material-ui。没有出现在开发中的问题会出现在生产中。

例如，我注意到的最重要的事情是，如果您混合由 material-ui 组件提供的自定义样式道具标志，并使用className 或style 添加您自己的样式，在构建期间，这些样式会被部分覆盖，如果不完全。

如果我这样做了

import   React,
       { useRef }  from "react";
import {
         Button,
         makeStyle,
         Theme
       }           from "@material-ui/core";
/*
Start of functional component using memo
.
.
.
*/

const useClasses = useRef(makeStyle((theme : Theme) => { return {
      buttonStyles:
      {
          backgroundColor: theme.palette.text.hint
      }
}}));

const styles = useClasses.current();

<Button
    color={"secondary"}
    className={styles.buttonStyles}>
    button text
</Button>
/*
.
.
.
*/

在开发中，该按钮将具有backgroundColor 我在makeStyles 中提供它，但在生产中，该属性将切换到secondary，如color 属性中给出的默认值theme.palette.secondary.main。

有时，即使使用 material-ui 中的组件而无需任何额外配置也会导致问题。

如果这很重要，我还使用 lazy 和 Suspense 的代码拆分。

Answer 1

StackMatch 你能链接你的 github/gitlab repo 吗？我想我可能知道问题出在哪里，但如果不查看您的开发环境是如何配置的，则无法确定。