加载新组件时 React Material UI 组件覆盖/冲突

Question

我说的是一个包含 jquery 和 bootstrap 东西 init 的大型 Web 应用程序。 作为使用 React 和 Material UI 重写这个巨大应用程序的一部分，我们正在逐个组件地编写。随着我们在尽快将其打造为 React 应用方面取得进展，总体上一切正常。

我们的问题： 当一个新的 react 组件加载到页面中时，现有的（已经加载的）react 组件将丢失部分或全部样式。

我们检查了新组件加载新样式（类），这些样式与其他已加载组件的现有类的名称相匹配。 例如：

如您所见，jss1、jss2、... MuiCardHeader、MuiGrid...也是之前加载的组件的名称，现在它们被新加载的组件覆盖。

Packages.json：

webpack 配置：

一些组件代码：我们使用make style，在某些情况下使用withstyle

尝试了太多东西。但似乎没有任何效果。在初始加载时，地图具有所有正确的材质 UI 内容，但只要我单击标记并加载弹出组件。现在地图因某些样式被覆盖而变得混乱。

我们怎样才能让每个组件样式都被命名为唯一的并且永远不会与其他东西冲突？ 我检查了 MUI 文档和 GitHub 上的类似问题，但对我们没有任何帮助。

有什么想法吗？

如果我添加：

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
const generateClassName1 = createGenerateClassName({
    seed: 'App2',
});

我的自定义类（如 root、mydivstyle）将具有前缀如 app2-jss1-root、app2-jss2-mydivstyle、... 但是 muiCard, MuiCardHeader, ... 仍然被覆盖。

Answer 1

所以经过几次尝试和错误。我能够解决这个问题。 基本上，由于我们现阶段的应用程序结构，我们没有可以添加单个类生成器的组件树路径。我们很快就会有一个。

解决方案是像这样包装每个组件。

import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';
const generateClassName = createGenerateClassName({
    seed: 'anyprefix',
});

class ActivityContainer extends Component {
    render() {
        return (
            <StylesProvider generateClassName={generateClassName}>
                    <componenet/>
            </StylesProvider>
        );
    };
}

我必须在容器级别执行此操作，这样在该容器中加载的任何组件都将继承此前缀。

组件之间不再有冲突的类名，并且可以动态加载它们。 至少在我们的情况下，这不是一个好方法，但没有其他选择。它将在 DOM 上留下更多类。