[Stack] Allows clearing of `margin-left` property of child items.

[SageJustus]

Summary

Allows clearing of margin-left of child items.

Stack adds margin-left to its children, which does not work as expected when line wrapping is allowed.

Examples

https://codesandbox.io/p/sandbox/mui-1-hv4ls6?file=%2Fsrc%2FDemo.tsx

Motivation

Fix alignment issues in wrapping situations.

Search keywords: stack margin

[siriwatknp]

You can switch to gap implementation.

I recommend doing it at the theme level:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Stack from '@mui/material/Stack';

const theme = createTheme({
  components: {
    MuiStack: {
      defaultProps: {
        useFlexGap: true,
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Stack>…</Stack> {/* uses flexbox gap by default */}
    </ThemeProvider>
  );
}

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @SageJustus! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!