是否可以限制组件样式而不是内联样式，以防止同一页面上的多个React应用覆盖？

debugcn 发表于 Dev

wwsalmon

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

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

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

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

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

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

是否有任何方法可以使Material UI为每个组件导出的样式专门针对该组件，以使样式不会彼此覆盖？

wwsalmon

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>
)

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。