React Admin 显示非常混乱 [英] React Admin displays very messed up

问题描述

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

My RA project renders fine when deploying locally, however, when I copy my build directory to an S3 bucket for deployment, it renders all messed up. Sometimes it works, but most of the time it renders like the below image. It works fine in both environments with AOR.

环境

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

React-admin version:2.0.3 Last version that did not exhibit the issue (if applicable): React version:16.4.1 Browser:Chrome/Safari

推荐答案

如果您的依赖项中有不同版本的 @material-ui，那么生产版本就会出现问题.下个版本会修复.

There is an issue with the production build if you have a different version of @material-ui in your dependencies. And it will be fixed in the next version.

这里是完整的问题:https://github.com/marmelab/react-管理员/问题/1782

同时，您可以编写一个解决方法(也可在问题中找到):为 JSS 编写您自己的类生成器.

Meanwhile, you can write a workaround (also available in the issue): write your own class generator for 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 包装管理员:

And wrap the admin with a JSSProvider:

import JssProvider from 'react-jss/lib/JssProvider';

export default () => (
    <JssProvider generateClassName={generateClassName}>
        <Admin />
    </JssProvider>
);

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

It should fix your CSS issue, if it's related to JSS classes minification and Material-UI.

这篇关于React Admin 显示非常混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！