Material-ui in production css

我有一个'dashboard'应用程序，它使用material-ui，然后在该仪表板内部调用并呈现其中的其他应用程序。这在dev中运行良好，但是一旦我使用生产构建材料ui classnames冲突并将一堆东西搞乱。Material-ui in production css

我不确定在这里提供什么，但有没有办法将前身应用到CSS名称？所以我可以有这样的名字，如.main-c1,app2-c1,app3-c1等？目前，当我渲染app2它重写所有类

来源

2017-10-13 John

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

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

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

来源

2017-10-13 17:38:44 Afro

我遇到的问题是，当我渲染第二个应用程序时，它会重新创建所有css（因此c1会被重新写入与以前完全不同的东西），但旧组件仍然存在。所以他们的CSS得到了全部的重击。我发现安装'react-jss'并将每个应用程序包装在其中，然后使用'classNamePrefix =“app1”'帮助了大部分内容。尽管如此，仍然有点混乱 – John

Material-ui in production css

回答

相关问题