Ternary Operator for PaddingLeft with MUI-CodePudding

In my application, I want the paddingLeft of the container to change if the side nav menu is selected open or closed.
There is a variable open that determines if the side nav is open.

What I tried:
When rendering the container, I added a sx which would set the padding accordingly.

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? "theme.spacing(34)" : "theme.spacing(200)"}}>

However, nothing is occurring; no padding is being applied.
Am I misusing the sx or is there a way this can be done with the style tag?

CodePudding user response：

theme is a prop which means you can't pass it like a string using double quotes. Try to use string interpolation instead.

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? `${theme.spacing(34)}` : `${theme.spacing(200)}`}}>

or just remove double quotes

<Container maxWidth={false} className={classes.container} 
  sx = {{paddingLeft: open ? theme.spacing(34) : theme.spacing(200)}}>

Update: fix undefined theme.

<Container maxWidth={false} className={classes.container} 
  sx = {{ paddingLeft: (theme) => open ?  theme.spacing(34) : theme.spacing(200) }}>