我在构建我的React应用程序时遇到了很大的问题。
我正在使用material-ui/core v.4.10.2,
在普通的react-scripts启动开发服务器上一切都运行得非常完美。
但是当通过Nginx或npm模块 serve 构建和提供服务时,渲染无法正常工作......
(我在material-ui Github 上看到了类似的问题,但它们都被错误地关闭了)
这是我的package.json文件,以防我的依赖关系出了问题(我肯定认为不是这种情况)
{
"name": "web_app",
"version": "0.0.1",
"private": true,
"dependencies": {
"@material-ui/core": "^4.10.2",
"@material-ui/styles": "4.10.0",
"@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.45",
"rc-color-picker": "^1.2.6",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-infinite-scroll-hook": "^2.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"tinycolor2": "^1.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@date-io/date-fns": "^1.3.11",
"@material-ui/pickers": "^3.2.7",
"@mui-treasury/styles": "^1.1.0",
"@trendmicro/react-sidenav": "^0.4.5",
"browserfs": "^1.4.3",
"cronstrue": "^1.85.0",
"date-fns": "^2.0.0-beta.5",
"formik": "^2.1.4",
"i18next": "^17.0.13",
"i18next-browser-languagedetector": "^3.0.3",
"i18next-xhr-backend": "^3.1.2",
"lodash": "^4.17.15",
"material-ui-confirm": "^2.0.4",
"moment": "^2.24.0",
"react-animated-slider": "^2.0.0",
"react-beautiful-dnd": "^13.0.0",
"react-blur-image-loader": "^0.2.2",
"react-digital-clock": "^0.1.2",
"react-dropzone-uploader": "^2.10.1",
"react-fine-uploader": "^1.1.1",
"react-i18next": "^10.12.2",
"react-image-lightbox": "^5.1.1",
"react-picky-date-time": "^1.3.2",
"react-router-dynamic-breadcrumbs": "^2.2.0",
"react-sticky-el": "^2.0.5",
"recompose": "^0.30.0",
"store2": "^2.10.0",
"tubular-react": "^4.1.31",
"yup": "^0.28.4"
}
}
生产版本和开发版本的视图图片
我也不知道为什么,但几分钟前我也有过这个问题,标题栏比此图片中的还要小,但我现在无法重现它... 有时效果会更好,有时会更差,但遗憾的是不能像这样发布。
但在这个 GIF 中,你可以看到更多的问题:
(在开发模式下没有一个视图是无法工作的...只有在构建时才会出现)
我已经尝试过的
- 尝试更新 MUI 及降级到第一个 4.0.0 版本
- Material UI 样式未渲染
- 给唯一的 className。
可惜没有任何效果...
我希望有人有类似的问题。 我看到有人在 MUI 的 Github 上开了一个 issue,但如我所说,它已经被关闭了。
material-ui
是问题所在?开发者控制台中有任何错误信息吗? - trixn