[Stack] Changing order of first item breaks spacing

[max-two]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The Stack item that is listed first in the source code does not have any spacing above it if its order is changed to be anything other than first in the stack. In the example A doesn't have spacing, but it should.

It's not just the first one that is messed up, it's also the one that ends up in first position. In the example B has spacing above it, but it shouldn't.

Expected behavior 🤔

The stack should apply spacing with respect to changes in order.

Steps to reproduce 🕹

Code Sandbox

Here is a minimal example:

    <Stack spacing={20}>
      <Box order={3}>
        A
      </Box>
      <Box order={1}>
        B
      </Box>
      <Box order={2}>
        C
      </Box>
    </Stack>

Context 🔦

This is the recommended solution for changing the order of items in a Stack as far as I can tell. It is recommended in this mui git issue and in this stack overflow, both of which came up near the top of my google searches.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 11.4
    CPU: (8) x64 Apple M1
    Memory: 166.34 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Managers:
    Homebrew: 3.5.4 - /usr/local/bin/brew
    pip3: 22.0.4 - ~/.venvs/scheduler/bin/pip3
    RubyGems: 3.0.3 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.33.1 - /usr/local/bin/git
    Clang: 12.0.5 - /usr/bin/clang
  Servers:
    Apache: 2.4.46 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.7 - /usr/local/bin/docker
  IDEs:
    Nano: 2.0.6 - /usr/bin/nano
    Vim: 8.2 - /usr/bin/vim
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.24 - /usr/bin/php
    Python: 3.10.5 - /Users/max/.venvs/scheduler/bin/python
    Python3: 3.10.5 - /Users/max/.venvs/scheduler/bin/python3
    Ruby: 2.6.3 - /usr/bin/ruby
  Databases:
    PostgreSQL: 14.4 - /usr/local/bin/postgres
    SQLite: 3.32.3 - /usr/bin/sqlite3
  Browsers:
    Chrome: 103.0.5060.134
    Safari: 14.1.1

[siriwatknp]

Currently, I don't see any other way than using gap.