0

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

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

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

Heroku 实例上不存在 makestyle

这是从我的 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 安装中添加一个，但这并没有起到作用。

提前非常感谢大家！

4

1 回答 1

0

建议的解决方案是添加索引 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 来设计所有内容。不，谢谢！

于 2021-10-29T05:16:29.970 回答