我正在使用单spa,react和material-ui开发一个微型前端概念证明应用程序。我遇到了一个问题,因为从Mui生成的类名相互叠加,因为在父应用程序中注册了多个单独的应用程序,每个子应用程序都有自己的Mui类名生成器。
示例
一个子应用是向左导航的Drawer
,并将以下<style />
元素添加到head
:
<style data-jss="" data-meta="MuiDrawer">
...
.jss3 {
left: 0;
right: auto;
}
...
</style>
第二个子应用是一个AppBar
,提供顶部导航,并将以下<style />
元素添加到head
:
<style data-jss="" data-meta="MuiAppBar">
...
.jss3 {
top: 0;
left: auto;
right: 0;
position: absolute;
}
...
</style>
当我检查MuiDrawer
元素时,这些破坏性名称导致该类(以及其他)最终看起来像这样:
.jss3 {
top: 0;
left: auto;
right: 0;
position: absolute;
}
我已经遍历了Mui文档,并试图找出是否有一种方法可以自定义每个应用程序中的命名,因此一个可能会生成.app1-jss3
,而另一个可能会生成.app2-jss3
。到目前为止,我还没有发现任何可以解决此问题的方法。寻找方向。
答案 0 :(得分:2)
解决方案:
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';
const generateClassName = createGenerateClassName({
seed: 'app1'
});
function App() {
return (
<JssProvider generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
答案 1 :(得分:1)
https://material-ui.com/customization/css-in-js/解释了您的所有问题(为什么名称看起来像这样,如何在生产中使用确定性名称,如何添加前缀)。
如果遇到冲突的类名,最好将jss提供程序包装在所有应用程序中(在react-jss中可用)。
答案 2 :(得分:0)
就我而言,不要忘记disableGlobal参数,否则它将无法正常工作。
createGenerateClassName({
disableGlobal: true,
seed: 'app1'
});