我的RA项目在本地部署时渲染得很好,但是,当我将我的构建目录复制到S3存储桶进行部署时,它会使所有搞砸了。有时它可以工作,但大部分时间它呈现如下图像。它在AOR的两种环境下都能正常工作。
环境
React-admin版本:2.0.3没有出现问题的最新版本(如果适用):React版本:16.4.1浏览器:Chrome / Safari
如果您的依赖项中有不同版本的@material-ui
,则生成版本存在问题。 And it will be fixed in the next version.
这是完整的问题:https://github.com/marmelab/react-admin/issues/1782
同时,您可以编写一个解决方法(也可以在问题中找到):为JSS编写自己的类生成器。
const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
let classCounter = 0;
// Heavily inspired of Material UI:
// @see https://github.com/mui-org/material-ui/blob/9cf73828e523451de456ba3dbf2ab15f87cf8504/src/styles/createGenerateClassName.js
// The issue with the MUI function is that is create a new index for each
// new `withStyles`, so we handle have to write our own counter
export const generateClassName = (rule, styleSheet) => {
classCounter += 1;
if (process.env.NODE_ENV === 'production') {
return `c${classCounter}`;
}
if (styleSheet && styleSheet.options.classNamePrefix) {
let prefix = styleSheet.options.classNamePrefix;
// Sanitize the string as will be used to prefix the generated class name.
prefix = prefix.replace(escapeRegex, '-');
if (prefix.match(/^Mui/)) {
return `${prefix}-${rule.key}`;
}
return `${prefix}-${rule.key}-${classCounter}`;
}
return `${rule.key}-${classCounter}`;
};
并使用JSSProvider包装管理员:
import JssProvider from 'react-jss/lib/JssProvider';
export default () => (
<JssProvider generateClassName={generateClassName}>
<Admin />
</JssProvider>
);
它应该修复你的CSS问题,如果它与JSS类缩小和Material-UI有关。
非常感谢@Kmaschta为我节省了数小时的搜索时间。
我不仅得到了上面显示的问题......但是当我点击Chrome刷新时,应用程序将重新加载到浏览器的最左侧,无法到达那里。
我查看了react-admin 1782上面的react-admin问题,这是package.json中给出的依赖问题以及react-admin的内部@ material-ui依赖性
由于@material-ui 12621,我正在编辑我的答案以显示最新版本的依赖项:
@ material-ui / core“:”1.5.1“,
“@ material-ui / icons”:“1.1.0”,
“react-admin”:“2.2.3”,
“反应”:“16.4.2”,
“react-dom”:“16.4.2”