JssProvider in Material-UI isn't applying my custom production prefix to CSS

I've built a fairly simple React app based on create-react-app which uses the Material-UI for its interface components. It also depends on one of my own packages which also uses Material-UI (same version) for a couple of shared components.

Things were looking good locally until I ran a production build and deployed it. Some of the styles were behaving oddly, for example the Material-UI grid was much narrower than when running locally.

I did some reading and found a few instances of people discussing colliding class names under my scenario. This took me to some official Material-UI documentation which provides the following example code to use a custom class name prefix:

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;

Before applying this fix when inspecting my production app's source code I could see the outermost DIV using the CSS class jss2 jss24.

After applying this fix my production app actually visually renders the same layout as my development version and so would appear to be fixed. However, examining the source shows the outermost DIV to have the class MuiGrid-container-2 MuiGrid-spacing-xs-8-24 which suggests to me something isn't right. I could leave it like this but it does mean I'm running with unoptimised code.

Am I doing something wrong here? Or is there an alternative resolution? I'm using current latest version of @material-ui/core (3.3.2) and the full contents of my App.js are:

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;