生成了jss类名定制吗?

时间:2018-10-17 17:26:07

标签: material-ui

我正在使用单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。到目前为止,我还没有发现任何可以解决此问题的方法。寻找方向。

3 个答案:

答案 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'
});