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 倉庫嗎？ 我想我可能知道問題是什么，但如果不了解您的開發環境是如何配置的，就無法確定。