create-react-app / Material-UI 应用程序样式在部署时有所不同

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. 在谷歌搜索之前的此类问题

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

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

为了方便起见，我已经包括了我package.json这里的引擎收录。

非常感谢您的帮助。

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

我一直在试验代码，似乎问题在于在构建时如何编译 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 仓库吗？ 我想我可能知道问题是什么，但如果不了解您的开发环境是如何配置的，就无法确定。