Motivation

• The browser support is promising at 91.87% https://caniuse.com/?search=flexbox%20gap
• The current approach uses margin via the selector '& > :not(style) + :not(style)' which is not a good DX when it comes to override.

  <Stack>
    <Button sx={{ mt: 1 }}>Test</Button> // the margin-top does not win.
  </Stack>

• Using gap reduces the complexity of the code because it works for both row and column direction.

It would fix:

• [Stack] Changing order of first item breaks spacing #33810

API

Adding a flag useFlexGap to Stack to switch the implementation from margin to flexbox gap:

<Stack spacing={2}>...</Stack> // '& > :not(style) + :not(style)': { marginTop: 16px };

<Stack spacing={2} useFlexGap>...</Stack> // { gap: 16px };

To switch all stacks to use gap, do it via the theme:

createTheme({
  components: {
    MuiStack: {
      defaultProps: {
        useFlexGap: true,
      }
    }
  }
})

Note: I used to think about using CSS feature query @support but it does not work for gap because the property is identical to CSS Grid gap which supports in most browser already.