Я работаю над концептуальным приложением с микро-интерфейсом, использующим single-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
. Пока я не нашел ничего, что могло бы решить эту проблему. Ищем какое-то направление.
disableGlobal
упомянутые ниже и в их обновленных документах? material-ui.com/styles/api/ 21.11.2019