Material-UI中何时应使用style属性而非sx prop？

两者虽然最终都是给组件挂载样式，但适配的场景边界非常清晰，按实际需求选基本不会踩坑：

优先用sx prop的场景 #

• 需要对接主题配置的时候：这是sx最不可替代的能力，不管是取主题色、间距、断点、阴影、圆角这些设计token，都能直接写简写，比如bgcolor: 'primary.main'、p: 3（自动对应主题定义的3倍间距单位），不用额外调用useTheme钩子拿主题对象再手动拼接值。
• 要写响应式、嵌套选择器样式的时候：sx支持直接写断点语法，比如fontSize: [14, 16, 18]就对应三个屏幕断点下的字号，也支持直接写伪类、子选择器，比如'&:hover': { bgcolor: 'primary.light' }、'& .child-icon': { ml: 1 }，不用额外写CSS类或者套styled组件。
• 写布局类重复样式的时候：sx的属性简写能省很多冗余代码，比如外边距m、上下外边距my、flex布局相关的属性简写，写起来比原生CSS属性效率高很多，维护的时候也更易读。
• 样式只在当前单个组件使用，不需要跨组件复用时：直接在组件上写sx是成本最低的方案，不用额外抽离样式文件或者封装样式组件。

优先用原生style属性的场景 #

• 样式是高频更新的动态值的时候：比如拖拽场景下实时变化的位移值、跟随鼠标定位的浮层坐标、动画逐帧更新的透明度/缩放值——sx的样式会经过MUI样式引擎的序列化处理，高频更新的时候会产生额外性能开销，原生style是直接挂在DOM行内样式上，没有额外计算成本，这种场景用style流畅度会好很多。我之前做可视化拖拽编辑器的时候一开始全用sx写实时位移，帧率掉得很明显，把transform这类高频更新属性换到style里立刻就恢复正常了。
• 样式是完全固定的静态值、和主题没有任何关联的时候：比如style={{ opacity: 0.6, userSelect: 'none' }}这种非常简单的固定样式，用style不需要经过样式引擎处理，渲染开销更低。
• 给不支持sx prop的组件传样式的时候：比如原生DOM标签、自己写的业务组件、第三方不兼容MUI样式体系的组件，style是所有React组件都支持的通用属性，不会出现样式不生效的问题。

实际写代码的时候可以用个很简单的判断标准：写样式前先确认这个样式要不要用主题的设计token、要不要写响应式/伪类逻辑，有这类需求就用sx；如果是高频变化的动态值、或者非常简单的固定静态值，直接用style就行，不用硬套sx语法。

内容的提问来源于stack exchange，提问作者sayandcode