react-admin - React Admin显示非常困惑

我的RA项目在本地部署时可以很好地呈现，但是，当我将构建目录复制到S3存储桶以进行部署时，它会呈现出混乱的状态。有时它可以工作，但是大多数情况下它的渲染如下图所示。使用AOR在两种环境下均能正常工作。

环境

React-admin版本：2.0.3
没有出现问题的最新版本（如果适用）：
反应版本：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>
);

如果它与JSS类的缩小和Material-UI有关，则应该可以解决CSS问题。