Spread theme in sx prop MUI 5

Question

The previous code, which used v4, was

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

How to migrate this code to MUI v5 using sx prop, I tried using it like this

 theme.mixins.toolbar,
  }}
/>

but the theme was not defined.

user_9236122 · Answer

You can do the following:

 theme.mixins.toolbar} />

or

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

As you can also pass a function with theme as parameter to the sx prop, it must return valid sx object.

user_217588 · Answer

Using styled() is probably less convoluted.

const Container = styled('div')(theme => theme.mixins.toolbar)

user_14348780 · Answer

For me most of the solutions above resulted in an non fatal error, as sx accepts object, not functions. This worked:

 theme["whateverYouWishToSpread"]
}}
>{someStuff}