Disable Material-UI production css classnames in React

Question

I'm using Material UI for React and I'd like to disable the way it handles the classnames when NODE_ENV=production. For example

• development: .MuiAppBar-root-12
• production: .jss12

I'd like the production class names to be the same classes used in development (I'm using this framework for prototyping reasons and it's hard to debug when sharing to others).

Answer 1

As implied by the prod prefix .jss12, Material UI uses react-jss to perform this minification. You can use Material UI's createGenerateClassName helper and turn on dangerouslyUseGlobalCSS, or simply create your own generateClassName function and pass it to a wrapping JssProvider component.

From the Material UI docs:

import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName({
  dangerouslyUseGlobalCSS: true, // won't minify CSS classnames when true
  productionPrefix: 'c', // 'jss' by default
});

function App() {
  return (
    <JssProvider generateClassName={ generateClassName }>
      ...
    </JssProvider>
  );
}

export default App;

Alternatively, if you want something more powerful (e.g. regexp matching), you can simply define your own function, as in this example on Github.

Example:

let classNameIndex = 0;
const generateClassName = (rule, styleSheet) => {
  classNameIndex++;
  return `${ styleSheet.options.classNamePrefix }-${ rule.key }-${ classNameIndex }`;
}

Answer 2

Adding index: 1 as the second argument of makeStyles function. See MuiOptions.

Also: createStyleSheet

index - 0 by default - determines DOM rendering order, higher number = higher specificity (inserted after).

//Do This Where ever you used 
//withStyle or makeStyle 
                                                                               
import { makeStyles} from "@material-ui/core/styles";                           
                                                                                   
  makeStyles((theme) => ({                                         
     root: {                                                                       
       flexGrow: 1,                                                                
     },                                                                            
     demo: {                                                                       
       backgroundColor: theme.palette.background.paper,                            
       marginBottom: 40,                                                           
     },                                                                            
    title: {                                                                      
      margin: theme.spacing(4, 0, 2),                                             
    },                                                                            
  }), { index : 1 });