Material UI v5.11 - Prop sx written twice in responsive

Question

I received a React program with Material UI v5.11

and appears in it this instruction:

<Stack sx={{ flexDirection: { sx: 'column', md: 'row' }}}>

and it seems working perfectly.

But I am confused. Why the second sx? sx: 'column'

Wouldn't it be right xs: 'column' ?

Thanks a lot for your help.

score 1 · Accepted Answer · edited Mar 07 '23 at 23:52

Yes xs: 'column' is the right one.
By default, Stack arranges items vertically in a column
The code above is wrong, there is no sx as prop for flexDirection

The code you have above is exactly the same as

sx={{ flexDirection: { md: 'row' }}}

Since sx is not known, it is ignored. and when the size is not md (sm or xs) the direction is switched to 'column' so this is why it looks like it is working.

The following lines are equal

<Stack sx={{ flexDirection: { sx: 'column', md: 'row' }}}>
<Stack sx={{ flexDirection: { blabla: 'column', md: 'row' }}}>
<Stack sx={{ flexDirection: { md: 'row' }}}>

Material UI v5.11 - Prop sx written twice in responsive

1 Answers1