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

Question

我正在为 React 使用 Material UI，我想在NODE_ENV=production. 例如

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

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

Answer 1

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

来自Material 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 上的示例所示。

例子：

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