Material-生产css中的ui

Question

我有一个“仪表板”应用程序，它使用material-ui，然后在仪表板内部调用并在其中呈现其他应用程序。这在dev中工作得很好，但是一旦我使用产品，构建材料ui类名称，冲突和混乱的一堆东西。

我不确定要在这里提供什么，但是有没有一种方法可以将前身应用到css名称？所以我可以有像.main-c1，app2-c1，app3-c1这样的名字？目前，当我呈现app2时，它会重写所有的类

Answer 1

我还是个新手，所以如果这不是最好的答案，请原谅。我觉得为每个应用程序定义不同的主题可能是实现你想要的结果的一种有用的方法。做这样的事情

export default {
spacing: spacing,
  fontFamily: 'Roboto, sans-serif',
  palette: {
    primary1Color: cyan500,
    primary2Color: cyan700,
    primary3Color: grey400,
    accent1Color: pinkA200,
    accent2Color: grey100,
    accent3Color: grey500,
    textColor: darkBlack,
    alternateTextColor: white,
    canvasColor: white,
    borderColor: grey300,
    disabledColor: fade(darkBlack, 0.3),
    pickerHeaderColor: cyan500,
    clockCircleColor: fade(darkBlack, 0.07),
    shadowColor: fullBlack,
  },
};

当你调用主题提供者加载不同的应用程序时，只需要提供不同的mUI主题即可。

<MuiThemeProvider muiTheme={YOUR-THEME-HERE}>
<AppBar title="My AppBar" />
</MuiThemeProvider>

mUI Theme Doc

希望这至少能有一点帮助。