部署时create-react-app / material-ui应用程式的样式不同

问题描述

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

仔细阅读我的代码，每一步都要格外小心。
在Chrome 85.0.4183.83（Linux，64位）上以隐身模式打开网站（开发和生产）
仔细阅读material-ui（material-ui.com）的文档和React文档，以获取与此相关的任何线索
在google中搜索以前的此类问题

到目前为止，没有任何进展。有人可以指导我正确的方向吗？

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

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

非常感谢您的帮助。

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

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

例如，我注意到的最大的事情是，如果您混合了material-ui组件给定的自定义样式prop标志，并在构建期间使用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进行代码拆分。

解决方法

StackMatch您可以链接您的github / gitlab存储库吗？我想我可能知道问题出在哪里，但是如果不了解开发环境的配置，就无法确定。

build build create-react-app material-ui reactjs reactjs web-deployment