MUI V5, how to minify class names in production build

Question

How is possible to there is no option to minify the prod class names? It is aa big step back. Please say me that I am not right.

In Material v4 can be achieved with 3 simple rules:

• Only one theme provider is used (No theme nesting)
• The style sheet has a name that starts with Mui (all Material-UI components).
• The disableGlobal option of the class name generator is false (the default).

In v5.5 in my experiment I don`t use any custom styles, just default provided from MUI components.

"react": "^18.0.0",
"react-dom": "^18.0.0",
"@emotion/react": "^11.8.1",
"@mui/material": "^5.5.2"

import { ThemeProvider, createTheme } from '@mui/material/styles'

<ThemeProvider theme={theme}>
    <CssBaseline />
    <Component {...this.props} />
</ThemeProvider>

import { Paper, Grid, Typography, Box } from '@mui/material'

<Grid container component={'main'}>
    <Grid item xs={false} sm={4} md={8} />
    <Grid item xs={12} sm={8} md={4} component={Paper} elevation={6} square>
        <Typography component={'h1'} variant={'h4'} align={'center'}>
            <Box fontWeight={'fontWeightLight'} m={1}>
                {'MY ACCOUNT'}
            </Box>
        </Typography>
    </Grid>
</Grid>

In production build I expect to be something like this:

jss1 jss2 jss3 jss4 jss5 jss6 and etc...

but the result is:

MuiGrid-root MuiGrid-container css-1d3bbye

MuiGrid-root MuiGrid-item MuiGrid-grid-sm-4 MuiGrid-grid-md-8 css-18mwvdj

Answer 1

I think i found it https://v5-0-6.mui.com/guides/classname-generator/

Converts from

<button
  class="MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButtonBase-root css-1ujsas3"
>
  Button
</button>

to

<button
  class="foo-bar-MuiButton-root foo-bar-MuiButton-text foo-bar-MuiButton-textPrimary foo-bar-MuiButton-sizeMedium foo-bar-MuiButton-textSizeMedium foo-bar-MuiButtonBase-root css-1ujsas3"
>
  Button
</button>

I have just tried it with latest MUIv5 and works great.