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

Question

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

开发:.MuiAppBar-root-12

生产:.jss12

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

Answer 1

正如 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;

或者，如果你想要更强大的东西(例如正则表达式匹配)，你可以简单地定义你自己的函数，如 this example on Github .

例子:

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