在React中禁用Material-UI生产CSS的类名 [英] Disable Material-UI production css classnames in React

问题描述

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

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

• 开发:.MuiAppBar-root-12
• 生产:.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).

推荐答案

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

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.

从材料UI文档:

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;

或者，如果您想要更强大的功能(例如正则表达式匹配)，则可以简单地定义自己的函数，如 Github上的示例.

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

示例:

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

这篇关于在React中禁用Material-UI生产CSS的类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！