reactjs - 组件样式是否可以限定范围而不是内联以防止在同一页面上被多个 React 应用程序覆盖？

Question

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

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

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

两个 React 组件都使用 Material UI 组件。因此，为每个组件注入(inject)了一组内联样式。

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

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

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

Answer 1

MUI 有一个组件 StylesProvider 允许您调整添加样式的方式。 StylesProvider 有一个属性 generateClassName，您可以向其传递一个生成器以确定如何生成类名。

您可以使用 MUI 函数 createGenerateClassName 创建一个生成器，您可以向该函数传递选项 disableGlobal 以向类名称添加简单的后缀，以便每个应用程序都具有作用域CSS 应用于它。

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

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

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