组件 styles 是否可以限定范围而不是内联以防止同一页面上的多个 React 应用程序覆盖？

Question

我有一个带有 html 的应用程序：

<div id="react-root-navbar"></div>
<div id="react-root-body"></div>

以及在每个 div 上调用React.DOM.render的相应 React 组件。

两个 React 组件都使用 Material UI 组件。 因此，为每个组件注入一组内联 styles。

问题是第二个组件的所有 styles 将比第一个组件在 HTML 中进一步下降，因此这些 CSS 规则将具有更高的优先级。 这会中断预期的级联流程并导致许多不正确的样式。 例如， .MuiAppBar-colorPrimary被.MuiPaper-root否决：

我知道理想的解决方案是将所有组件都放在一个 React 应用程序中，并首先防止重复导入。 但是，这对于我正在使用的代码库是不可能的，它使用 Django 前端一次将一个迁移到 React。

有没有办法让 Material UI 为每个组件导出的样式专门针对该组件，以便 styles 不会相互覆盖？

Answer 1

MUI 有一个组件StylesProvider ，允许您调整 styles 的添加方式。 StylesProvider有一个属性generateClassName ，您可以将生成器传递给它以确定如何生成 class 名称。

您可以使用 MUI function createGenerateClassName创建生成器，您可以将选项disableGlobal传递给该生成器以将简单的后缀添加到 class 名称，以便每个应用程序都将作用域 Z2C56C360540420D293317 应用于它。

我已经将所有 MUI 组件包装在一个组件MUIThemeProvider中以使用 MUI 组件ThemeProvider 。 我刚刚将StylesProvider添加到此包装器中：

const generateClassName = createGenerateClassName({
    disableGlobal: true,
});

return (
    <StylesProvider generateClassName={generateClassName}>
        <ThemeProvider theme={theme}>
            {props.children}
        </ThemeProvider>
    </StylesProvider>
)