Question

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

Answer 1

解决方案：

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;

Answer 2

https://material-ui.com/customization/css-in-js/解释了您的所有问题（为什么名称看起来像这样，如何在生产中使用确定性名称，如何添加前缀）。

如果遇到冲突的类名，最好将jss提供程序包装在所有应用程序中（在react-jss中可用）。

Answer 3

就我而言，不要忘记disableGlobal参数，否则它将无法正常工作。

createGenerateClassName({
  disableGlobal: true,
  seed: 'app1'
});

生成了jss类名定制吗？

3 个答案: