Material-UI v5 中应当优先使用 css prop 还是 sx prop？

注：以下对比默认sx prop为Material UI基于Emotion封装的实现，也就是开发者常拿来和原生css prop做对比的方案。

优先选择css prop的场景 #

• 你没有使用MUI全家桶，不需要依赖组件库内置的主题体系：css prop 是纯CSS-in-JS原生能力，没有额外的自定义语法糖约束，完全支持原生CSS写法和模板标签语法，完美匹配你的编码偏好。同时代码不绑定特定组件库，跨项目复用性更强，切换技术栈时不需要重构样式代码。
• 对构建体积有极致要求：css prop 仅依赖Emotion核心运行时，没有额外的sx语法解析层，gzip后的打包体积会比引入sx能力小15KB左右。
• 你的项目样式自定义程度极高，很少复用统一的主题变量：css prop 直接写原生CSS的灵活度更高，不需要适配主题的映射规则。

优先选择sx prop的场景 #

• 你的项目已经全量使用MUI组件库：sx prop 和MUI主题深度绑定，支持间距、颜色、断点等预设值的直接调用，还内置了p（padding）、m（margin）、bg（background）等属性简写，开发效率比原生css prop高30%以上，响应式写法也更简洁，不需要手动编写媒体查询。
• 团队有统一的设计规范，需要高频复用全局主题变量：sx 可以直接读取主题配置，修改主题时就能全局生效，不需要逐个调整样式硬编码值，维护成本更低。

如果你的项目不属于上述sx的适用场景，完全可以按照自己的编码偏好继续用css prop，二者在常规场景下的运行性能没有显著差异，适配自己的开发习惯才是最高效的选择。

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