[Stack] `direction` prop with array notation breaks spacing prop

[aaarichter]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When writing the direction prop as array, any spacing css margin prop will be rendered with a postfix undefined. This is not the case when direction is written as object

Expected behavior 🤔

that direction in array notation doesn't break the spacing calculation

Steps to reproduce 🕹

Steps:

1. create

<Stack direction={['row', 'column-reverse']} spacing={2}>
    <Item>Item 1</Item>
    <Item>Item 2</Item>
    <Item>Item 3</Item>
</Stack>

2. Note that there is no spacing
3. in the dev tool the margin property contains an undefined
   

with object notation this is working:

Context 🔦

I have a dialog with dialog action buttons. For mobile, I want to stack them vertically, otherwise horizontally. (I know screenshot shows otherwise 😉 )

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Edge: Not Found
    Firefox: 98.0.2
    Safari: 15.4
  npmPackages:
    @emotion/react: 11.8.2 => 11.8.2 
    @emotion/styled: 11.8.1 => 11.8.1 
    @mui/icons-material: 5.5.1 => 5.5.1 
    @mui/material: 5.5.3 => 5.5.3 
    @mui/system: 5.5.3 => 5.5.3 
    @mui/utils:  5.6.0 
    @types/react: 17.0.16 => 17.0.16 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: 5.3.5 => 5.3.5 
    typescript: 4.6.3 => 4.6.3 

[aaarichter]

the code lines likely involved are
https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Stack/Stack.js#L79-L86 that requires a breakpoint and
https://github.com/mui/material-ui/blob/master/packages/mui-system/src/breakpoints.js#L28 and https://github.com/mui/material-ui/blob/master/packages/mui-system/src/breakpoints.js#L48 where no breakpoint is passed into styleFromPropValue

combination of direction and spacing that don't work:

// both arrays, with both at least 1 items
direction: ['row', 'column'],
spacing: [2, 4]

// direction is an array with at least 2 items
direction: ['row', 'column'],
spacing: 2

---

I think https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Stack/Stack.js#L62-L67 is part of the problem, where possible breakpoints are gathered based on a simple check that requires ownerState.spacing or ownerState.direction to be an object to work

[mnajdova]

Agree, this should work. cc @siriwatknp we should consider this when moving the component to the system.

[siriwatknp]

Agree, this should work. cc @siriwatknp we should consider this when moving the component to the system.

Sure, will keep that in mind for the system Grid.

[hbjORbj]

The fix for this issue has been created in #33548. Please check below for Codesandboxes before and after:

Codesandboxes:

• Before

• 

• After

•