React Admin 显示非常混乱

Question

我的 RA 项目在本地部署时呈现良好，但是，当我将构建目录复制到 S3 存储桶进行部署时，它呈现得一团糟。有时它可以工作，但大多数时候它呈现如下图所示。它在 AOR 的两种环境中都能正常工作。

环境

React-admin version:2.0.3 未出现该问题的最新版本（如果适用）：反应 version:16.4.1 浏览器：Chrome/Safari

Answer 1

如果您的依赖项中有不同版本的 @material-ui，则生产版本会出现问题。 And it will be fixed in the next version.

这是完整的问题：https://github.com/marmelab/react-admin/issues/1782

同时，您可以编写一个解决方法（也可在问题中找到）：为 JSS 编写您自己的 class 生成器。

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>
);

如果它与 JSS classes 缩小和 Material-UI.

有关，它应该可以解决您的 CSS 问题

Answer 2

非常感谢@Kmaschta 节省了我数小时的搜索时间。

我不仅遇到了上面显示的问题...而且当我点击 chrome 刷新时，应用程序会在浏览器的最左侧重新加载，无法到达那里。

我查看了 react-admin 1782 上面的 react-admin 问题，这是 package.json 中给出的依赖项和 react 的内部 @material-ui 依赖项的问题-admin

我正在编辑我的答案以显示由于 @material-ui 12621 导致的最新版本的依赖关系：

@material-ui/core": "1.5.1",

"@material-ui/icons": "1.1.0",

"react-admin": "2.2.3",

"react": "16.4.2",

"react-dom": "16.4.2"

React Admin 显示非常混乱

React Admin displays very messed up

react-admin