Como alterar o pré-nome das classes geradas pelo Material UI

Olá, estou criando um projeto que utiliza o Material UI e percebo que quando eu compilo o mesmo ele gera as classes em produção do JSS ex:

Estou acostumado a trabalhar usando css modules junto com a biblioteca react-app-rewired onde eu tenho a configuração abaixo para forçar a alterar as classes como eu bem quiser:

const { override, adjustStyleLoaders } = require('customize-cra');
const loaderUtils = require('loader-utils');
const path = require('path');

module.exports = override(
  ['prod', 'production'].includes(process.env.NODE_ENV) &&
  adjustStyleLoaders(({ use: [, css] }) => {
    if (css.options.modules) {
      css.options.modules.getLocalIdent = (context, _, localName, options) => {
        const hash = loaderUtils.getHashDigest(
          path.posix.relative(context.rootContext, context.resourcePath) + localName,
          'md5',
          'base64',
          4,
        );
        const className = loaderUtils.interpolateName(context, '-' + hash, options);
        return className.replace('.module_', '_');
      };
    }
  }),
);

O resultado dessa configuração fica como o abaixo:

O problema é que essa configuração não altera as classes geradas pelo Material UI em produção. Existe alguma forma de que eu possa forçar as classes do Material UI a serem reescritas como no exemplo?

EDIT

Os componentes que estou criando estão como no exemplo abaixo:

import React from 'react';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
    root: {},
    detatch: {},
    content: {},
}));

function LoginPage() {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <div className={classes.detatch}>detatch</div>
            <div className={classes.content}>content</div>
        </div>
    );
};

export default LoginPage;

import React from 'react';
import { StylesProvider, createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  productionPrefix: 'prefixo',
});

export default function App() {
  return (
    <StylesProvider generateClassName={generateClassName}>...</StylesProvider>
  );
}