CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Ijat Ayam
Ijat Ayam

Reputation: 96

Spread theme in sx prop MUI 5

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

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

but the theme was not defined.

Upvotes: 7

Views: 3476

Answers (3)

El Yobo
El Yobo

Reputation: 14946

Using styled() is probably less convoluted.

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

Upvotes: 1

ernestkosma
ernestkosma

Reputation: 21

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

<Box
sx={{
    "&": (theme) => theme["whateverYouWishToSpread"]
}}
>{someStuff}</Box>

Upvotes: 2

v1s10n_4
v1s10n_4

Reputation: 697

You can do the following:

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

or

<Box sx={theme => ({
  ...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.

Upvotes: 5

Related Questions