Heroku 部署删除 Material UI makeStyles？答案

【问题标题】：Heroku Deployment Removes Material UI makeStyles?Heroku 部署删除 Material UI makeStyles？
【发布时间】：2021-12-12 09:09:18
【问题描述】：

看来 Heroku 部署正在删除我对 MUI makeStyles 文档的所有调用，并随后破坏了我的应用程序的大量外观。在我回去做我所有的造型之前寻找任何智慧（测试它 - 这确实有效）。

在我的本地主机视图上一切看起来都很好。

差异截图示例（忽略用户名差异）-

这是从我的 styles.jsx 中截取的一段（我将其删减以使这段代码的长度合理，但还有很多）：


const useStyles = makeStyles(() => ({
  //-------------Disclaimer.jsx-------------//

  disclaimer: {
    textAlign: "center",
    paddingTop: "20px",
    backgroundSize: "70",
    backgroundPosition: "30% 40%",
    backgroundRepeat: "no-repeat",
  },
  Button: {
    marginTop: "40px",
    paddingTop: "40px",
  },


}));

export default useStyles;

...在我拥有的每个组件中：

import useStyles from "../components/styles/styles";

...和：

const classes = useStyles();

...再一次，它在我的本地主机上运行良好。

当我推送到 Heroku 时，我的终端中没有与此相关的错误。

我将其中的一部分从调用 className={classes.CLASSNAMEHERE} 更改为与 style={{style: "style"}} 内联的样式并修复它。

我希望这可以总结问题。如果我没有完全按照预期完成这篇文章，请原谅我 - 我是相当新的。我希望这是一个常见问题，但我对此无能为力！我发现的唯一一件事是建议我将 --save 添加到我的 MUI 安装中，但这并没有起到作用。

在此先感谢大家！

【问题讨论】：

stackoverflow.com/q/62473898
@NearHuscarl 似乎破坏了我的开发版本中的所有内容，就像它出现在 Heroku 上一样 - 也许这是朝着正确方向迈出的一步？请原谅我在这方面有点愚蠢——我还比较新。

标签： reactjs heroku material-ui classname makestyles

【解决方案1】：

建议的解决方案是添加索引 1 以优先于 JSS 样式。

我还不得不砍掉那个箭头函数。

因此：

const useStyles = makeStyles(() => ({

  disclaimer: {
    textAlign: "center",
    paddingTop: "20px",
    backgroundSize: "70",
    backgroundPosition: "30% 40%",
    backgroundRepeat: "no-repeat",
  },

    //--------------------------
    //------styling continued...
    //--------------------------

}));

export default useStyles;

...变成：

const useStyles = makeStyles({  //removed arrow function

  disclaimer: {
    textAlign: "center",
    paddingTop: "20px",
    backgroundSize: "70",
    backgroundPosition: "30% 40%",
    backgroundRepeat: "no-repeat",
  },

    //--------------------------
    //------styling continued...
    //--------------------------

}, {index: 1});     //added index 1

export default useStyles;

箭头功能破坏了我的本地主机上的外观。

或者，正如我即将做的那样，您可以通过内联或使用传统的 CSS 来设计所有内容。不用了！

【讨论】：