MUI v5：系统属性样式与 sx prop 之间是否存在性能差异？

Question

从 v4迁移到 v5指南指出：

系统Boxprops 在 v5 中有一个可选的替代 API，使用sxprop. 您可以阅读本节了解这个新 API 背后的“原因”。

<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>

所提到的部分表明：

将系统置于一个 prop ( sx) 下有助于区分仅为 CSS 实用程序而定义的 props 与为组件业务逻辑而定义的 props。这对于关注点分离很重要。

但是说到性能，这两种方式都属于性能权衡d. Render 1,000 Box中的基准项吗？或者使用系统属性和prop之间有什么区别吗？sx

Answer 1

在实践中，它们应该是相同的，系统中的一些组件中的 propsBox或Typography将被捕获并在sxprop 中再次传播（来源）。所以它的内部看起来像这样：

const { sx: originalSx, ...otherSystemProps } = props;
// sx and system props will be merged into mergedSx
const { ..., mergedSx } = extendSxProp({ originalSx, ...otherSystemProps });

return <BoxRoot sx={mergedSx} {...} />

sx这意味着两种方法都在引擎盖下使用prop（最慢的造型方法）。使用系统属性的方法可能会慢一点，因为它需要sx在内部与另一个道具合并，但我认为这不是一个大问题（两种方法都应该同样慢）。