我正在将现有的代码库转换为Material UI，并试图为组件的样式设置一个标准。
我以前在一个代码库中工作过，那里所有的组件都使用sx prop进行样式化，我没有注意到任何特殊的问题。但是，我在很多地方看到建议，sx prop应该只用于“一次性”样式化，如果你需要相同类型的多个组件具有相同的样式化，styled() API将是更好的选择。
虽然我不明白为什么会这样？如果我创建了一个组件，它是一个内部Material UI组件的 Package 器，并且内部组件已经用sx属性进行了样式化。这难道不也可以实现同一类型的多个组件具有相同样式化的目标吗？如果是这样，“styled（）”API有什么用？
1条答案
按热度按时间bcs8qyzn1#
在
sx添加到材质UI之前，styled()是一个简单而简短的语法，用于创建具有不同样式的可重用材质UI组件。使用
sx，您现在几乎可以像styled()一样做任何事情，但效果更好。有些人可能会认为，使用
sx创建可重用的Material UI组件需要更多的代码，这是正确的，但有两件事sx可以做，而styled()不能做：1.可以基于组件状态（组件的不同样式或不同子组件的不同样式）设置为条件
1.有速记/助手，如
{ ml: 1 }（空格）或{ display: { xl: 'block', xs: 'none' } }（断点）特别是最后一点是
sx的一大卖点，因为它使您的样式化组件更容易与MUI样式和主题同步。styled()仍然是创建样式化的可重用HTMLEelement的好方法。就我个人而言，使用
sx的一切，但风格可重用的HTMLEelement。