Material-UI的sx属性是否生成类TailwindCSS的优化工具类？及包体积优化

使用Tailwind CSS时，重复使用同一工具类的编译示例如下：

<div class="font-bold"></div>
<div class="font-bold"></div>

编译后生成的CSS：

.font-bold{
  font-weight: bold;
}

那么当在Material-UI中重复使用sx属性时，比如：

<Box sx={{ p: 1 }}>One</Box>
<Box sx={{ p: 1 }}>two</Box>

会生成重复的CSS类（如下），还是会像Tailwind一样复用同一个类来减少冗余？

重复类的情况：

.css-bkjlsd{
  padding: 4px;
}

.css-fdsfdffd{
  padding: 4px;
}

复用类的情况：

.css-fdjf{
  padding: 4px;
}

同时想了解如何优化Material-UI的包体积。

一、sx 属性的编译机制 #

Material-UI的sx属性默认会复用相同样式的类名，不会生成重复冗余的CSS。

当多个组件使用完全一致的sx配置（比如{ p: 1 }）时，MUI的样式引擎会识别到相同的样式规则，只生成一个对应的CSS类，所有使用该配置的组件都会共用这个类，逻辑和Tailwind的工具类复用类似，不会出现重复定义相同样式的情况。

需要注意：如果sx配置存在细微差异（哪怕是属性顺序不同，比如{ p:1, m:2 }和{ m:2, p:1 }），旧版本MUI可能会生成不同的类，但最新版本已经优化了该场景，会对样式规则做标准化处理后再判断是否复用。

二、Material-UI 包体积优化方案 #

• 按需导入组件：不要直接导入整个MUI库，只导入需要的组件。比如用@mui/material/Box代替@mui/material，配合babel-plugin-transform-imports插件可自动处理按需导入，降低打包体积。
• 精简主题配置：自定义MUI主题时，移除不需要的组件样式、调色板项或断点配置。比如不需要暗色模式时，直接在主题中关闭相关配置，减少主题生成的CSS量。
• 开启Tree Shaking：确保Webpack、Vite等打包工具开启Tree Shaking，MUI基于ES模块构建，支持通过Tree Shaking剔除未使用的代码。
• 替换重型组件：如果只需要基础功能，用轻量组件替代重型组件。比如用Table替代功能复杂的DataGrid，减少引入的代码量。
• 优化CSS-in-JS配置：在MUI样式引擎配置中开启cache选项，最大化样式类的复用效率；生产环境自动关闭样式调试信息并压缩CSS代码。

内容的提问来源于stack exchange，提问作者over-heaven