Question

我有一个＆＃39;仪表板＆＃39;使用material-ui的应用程序，然后在该仪表板内部调用并呈现其中的其他应用程序。这在dev中工作得很好，但是一旦我使用了一个生产版本的材料ui classnames就会发生冲突并弄乱一堆东西。

我不确定在这里提供什么，但有没有办法将前任应用于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

希望这有助于至少一点点。

材料-ui在生产中css

1 个答案: