材质UI / Webpack / React-生产模式下的className优化/缩小

Question

webpack - v4+
material ui - v4.9.6
react - v16.12.0

通常，所有类都应作为第一个示例中的最后一个。由于生产模式的某些原因，许多类都不会更改。有想法吗？

示例1：

<div class="MuiDrawer-root MuiDrawer-docked jss408"></div>

示例2：

<div class="MuiPaper-root jss469 MuiPaper-elevation1 MuiPaper-rounded"></div>

Answer 1

样式className并非在生产模式下被设计为确定性的。

但是，生成的@material-ui/core组件的类名的行为有所不同。满足以下条件时，类名是确定性的：

• 仅使用一个主题提供程序（无主题嵌套）
• 样式表的名称以Mui（所有Material-UI组件）开头。
• 类名称生成器的disableGlobal选项为false（默认值）。

---

引用：

• Material-UI className generation文档
• 生成器creategenerateclassname的API