JssProvider в Material-UI не применяет мой собственный производственный префикс к CSS

Question

Я создал довольно простое приложение React, основанное на create-Reaction-app , которое использует Material-UI для своих компонентов интерфейса. Это также зависит от одного из моих собственных пакетов, который также использует Material-UI (ту же версию) для пары общих компонентов.

Все выглядело хорошо, пока я не запустил производственную сборку и не развернул ее. Некоторые стили вели себя странно, например, сетка Material-UI была намного уже, чем при локальном запуске.

Я немного прочитал и обнаружил несколько случаев, когда люди обсуждали конфликтующие имена классов по моему сценарию. Это привело меня к некоторой официальной документации Material-UI , которая предоставляет следующий пример кода для использования пользовательского префикса имени класса:

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true,
  productionPrefix: 'c',
});

function App() {
  return (
    <JssProvider generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;

Перед применением этого исправления при проверке исходного кода моего производственного приложения я мог видеть самый внешний DIV с использованием класса CSS jss2 jss24.

После применения этого исправления мое производственное приложение фактически визуализирует тот же макет, что и моя версия для разработки, и поэтому может быть исправлено. Однако изучение источника показывает, что самый внешний DIV имеет класс MuiGrid-container-2 MuiGrid-spacing-xs-8-24, который подсказывает мне, что что-то не так. Я мог бы оставить это так, но это значит, что я работаю с неоптимизированным кодом.

Я что-то здесь не так делаю? Или есть альтернативное разрешение? Я использую текущую последнюю версию @material-ui/core (3.3.2) и полное содержимое моего App.js:

import React, { Component } from 'react';
import { Provider } from "react-redux";
import { OidcProvider } from 'redux-oidc';
import JssProvider from 'react-jss/lib/JssProvider';
import Routes from './routes';
import store from './store';
import userManager from './utils/userManager';
import { 
    CustomUiTheme as Theme, 
    CustomUiLayout as Layout,
    CustomUiSnackbar as Snackbar,
    CustomUiModalAlert as Alert
} from 'custom-ui';
import Loading from './components/loading';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
    dangerouslyUseGlobalCSS: true,
    productionPrefix: 'tw',
});

class App extends Component {
    render() {
        return (
            <JssProvider generateClassName={generateClassName}>
                <Provider store={store}>
                    <OidcProvider store={store} userManager={userManager}>
                        <Theme>
                            <Loading />
                            <Layout variant="xmas">
                                <Alert />
                                <Routes />
                                <Snackbar />
                            </Layout> 
                        </Theme>
                    </OidcProvider>
                </Provider>
            </JssProvider>
        );
    }
}

export default App;