在 sx prop MUI 5 中传播主题

Question

之前使用 v4 的代码是

const useStyles = makeStyles(theme => ({
  toolbarMargin: {
    ...theme.mixins.toolbar
  }
}))

如何使用sxprop 将此代码迁移到 MUI v5，我尝试像这样使用它

<Box
  sx={{
    ...(theme) => theme.mixins.toolbar,
  }}
/>

但theme没有定义。

Answer 1

您可以执行以下操作：

<Box sx={theme => theme.mixins.toolbar} />

或者

<Box sx={theme => ({
  ...theme.mixins.toolbar,
  // other sx stuff
})} />

theme由于您还可以将带有参数的函数传递给sxprop，因此它必须返回有效的 sx 对象。