MUI 5中如何在sx prop内正确展开theme样式完成v4代码迁移

你当前的sx语法不符合MUI v5的规范：sx的主题注入逻辑要求，若要访问全局theme实例，要么直接将sx的取值设置为接收theme作为入参的回调函数，要么在单个样式属性的取值位置写回调函数。你将回调函数写在对象字面量内部展开，此时theme没有被MUI注入，自然会抛出未定义的错误。

方案1：sx整体设为回调（最贴合原v4写法的实现） #

直接把整个sx的值替换为接收theme的函数，返回包含theme.mixins.toolbar的样式对象即可，也可以在对象内追加其他自定义样式：

<Box
  sx={(theme) => ({
    ...theme.mixins.toolbar,
    // 可在此处添加其他样式规则
  })}
/>

方案2：单属性引用theme #

如果你只需要用到toolbar的部分样式，也可以单独对指定属性设置回调访问theme：

<Box
  sx={{
    minHeight: (theme) => theme.mixins.toolbar.minHeight,
    // 其他需要的样式属性
  }}
/>

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