How to change the pre-name of classes generated by Material UI

Question

Hello, I am creating a project that uses Material UI and I realize that when I compile it generates the classes in production of JSS ex:

I’m used to working using css modules together with the library React-app-rewired where I have the configuration below to force to change the classes as I wish:

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_', '_');
      };
    }
  }),
);

The result of this setting is as below:

The problem is that this configuration does not change the classes generated by the UI material in production. Is there any way I can force the UI Material classes to be rewritten as in the example?

EDIT

The components I am creating are as in the example below:

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;

Answer 1

If I understand what you want to do, you can use createGenerateClassName in your Stylesprovider to pass its prefix

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>
  );
}

documentation: https://material-ui.com/pt/styles/api/