如何在已有 Material UI 的项目中使用组件库中的 Material UI？

Question

我在我的项目中使用 Material UI，同时我们有一个组件库（一个包含许多共享 React 组件的 npm 包）。

库中的这些组件也基于 Material UI。

因此，当我从库中导入这些组件以在我的项目中使用时，它会将块复制<styles>到正在使用的某些组件（例如MuiButtonBase-root）。

基于此，当第二个MuiButtonBase-root出现时，它会重置一些 css 样式。

有解决办法吗？

---

编辑1：

这是一个例子，也许组件不是按这个顺序排列的，因为我不太确定问题发生的顺序。

// myProject
import { AppBar, Tabs, Tab, ThemeProvider } from '@material-ui/core';
import { Button, SharedComponentProvider } from '@shared-components'; // components based on MUI

function App() {
  return (
    <SharedComponentProvider>
      <ThemeProvider theme={fooTheme}>
        <AppBar position="static">
          <Tabs>
            <Tab label="Item One"  />
            <Tab label="Item Two"  />
            <Tab label="Item Three"  />
          </Tabs>
        </AppBar>

        <Button>Click me</Button>
      </ThemeProvider>
    </SharedComponentProvider>
  );
}

是SharedComponentProvider这样的：

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

function SharedComponentProvider({ children }: any) {
  return (
    <ThemeProvider theme={sharedTheme}>
      { children }
    </ThemeProvider>
  );
}

由于Tab组件也是基于MUI组件的，所以它会创建两个with insideButton标签，最终会出现这种情况。<style>. MuiButtonBase-root

Answer 1

您可以在项目中更改用于生成的 CSS 的前缀以避免冲突：https://material-ui.com/styles/api/#creategenerateclassname-options-class-name-generator