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

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

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

回答2:

//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

来源：https://stackoverflow.com/questions/51413555/disable-material-ui-production-css-classnames-in-react

标签

reactjs

material-ui