CODEWITHSUNDEEP
reactjsmaterial-ui
cusejuice
cusejuice

Reputation: 10691

Disable Material-UI production css classnames in React

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

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).

Upvotes: 6

Views: 4509

Answers (2)

Amir
Amir

Reputation: 404

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

enter image description here

Upvotes: 2

David Calhoun
David Calhoun

Reputation: 8581

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

Upvotes: 5

Related Questions