Сгенерированная jss настройка имени класса?

Question

Я работаю над концептуальным приложением на микро-интерфейсе, использующим single-spa, реагировать и 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 вокруг всех приложений (доступно вact-jss).