reactjs - `className` 属性和新的 MUI 系统实用程序 `sx` 属性之间的区别？

Question

我大部分时间都在使用makeStyles钩子(Hook)来设置我的 Material-ui 组件的样式。它相当简单、模块化和高性能。
Material-UI v5 具有 new sx似乎相当有前途的 Prop ，但在他们的文档底部，他们提到存在性能权衡。
我的问题是 makeStyles 之间的最终区别是什么？和 sx ，我应该考虑切换吗？
我觉得我还应该指出，使用 sx Prop 似乎增加了 return部分代码并使用 makeStyles只是感觉更干净。
我是在这里遗漏了什么，还是有一些关于 sx 的革命性的东西？ ，那应该让我想用吧？

Answer 1

据我了解，SX 是风格的替代品。
谈到 ReactJs，如果你尝试使用内联样式，你需要
在 HTML 中:

<div class="awesome" style="background-color: #f00">
  <p style="font-size:14px;">
</div>

转换为 JSX:

<div className="awesome" style={{backgroundColor: '#f00'}}>
   <p style={{fontSize: '14px'}}></p>
</div>

With SX : 这是一个 super 集合、响应式的主题

<div sx={{ width: { tablet: 100, laptop: 300, desktop: 500, }, }} > 
    This box has a responsive width 
</div>

不要急于使用，根据基准测试结果它需要很多时间 https://next.material-ui.com/system/basics/#performance-tradeoff