Material-ui 的 sx 属性是否会生成类似于 tailwindcss 的优化实用程序类？

Question

使用 tailwind css 时，它的编译方式如下：

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

编译为

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

所以...当像这样使用 sx 时：

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

它是这样编译的吗：

.css-bkjlsd{
  padding: 4px;
}

.css-fdsfdffd{
  padding: 4px;
}

或者像这样（许多组件连接到的实用程序类。为了减少冗余CSS而创建）：

.css-fdjf{
  padding: 4px;
}

// 是低效地为相同的东西生成不同的类，还是像 tailwindcss 一样高效，并将许多组件连接到一个类以最小化包大小？我听说 MUI 很重，所以我想听听经验丰富的开发人员如何针对小捆绑包优化 MUI。

Answer 1

这是第一个选项。为添加的每个 sx prop 创建唯一的不稳定类名。