how to obfuscating css classes ?

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

i want to obfuscating Material UI classes names

Examples 🌈

.MuiAppBar-root => .pxcHI .MuiToolbar-root => .dgSjX … something like google obfuscating :

My Solution

i use rewire to overwrite create-react-app webpack configs by add this code:

...
config.module.rules.push( {
    test: /\.css$/i,
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: '[sha1:hash:hex:5]',
        },
    },
})
...

it’s work for my custom css files but not effected on Material UI classes names i just want to know how to config webpack to overwriteing material ui classes names and obfuscating theme?

[oliviertassinari]

@AkramiPro You can write a JSS plugin for doing such, see #19455.

[cc-greglorenzen]

Is there an update on whether or not the JSS plugin overrides work with MUI 5? I have a similar issue as @dictor93 and need to increase the specificity to override default site styling.