Question

我将Material UI用于React，我想在NODE_ENV=production时禁用它处理类名的方式。例如

开发：.MuiAppBar-root-12
生产：.jss12

我希望生产类名与开发中使用的类相同（出于原型设计的原因，我正在使用此框架，与他人共享时很难调试）。

Answer 1

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

Answer 2

如prod前缀.jss12所暗示，Material UI使用react-jss进行此缩小。您可以使用Material UI的createGenerateClassName帮助程序并打开dangerouslyUseGlobalCSS，也可以简单地创建自己的generateClassName函数并将其传递给包装的JssProvider组件。

来自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;

或者，如果您想要更强大的功能（例如regexp匹配），则可以像this example on Github中那样简单地定义自己的函数。

示例：

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

在React中禁用Material-UI生产CSS类名

2 个答案: