[Stack] Does not play nicely with TextField margin dense

[dwjohnston]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When you have a row Stack with two TextFields margin dense, they are misaligned:

      <Stack spacing={2} direction="row">
        <TextField margin="dense" />
        <TextField margin="dense" />
      </Stack>

Expected behavior 🤔

The text fields should be aligned.

Steps to reproduce 🕹

Repro: https://codesandbox.io/s/basicstack-demo-material-ui-forked-khtbqp?file=/demo.tsx:566-696

Context 🔦

Horizonal forms - eg. a filter bar.

Your environment 🌎

See repro

[oliviertassinari]

What we do here

material-ui/packages/mui-material/src/Stack/Stack.js

Line 85 in a84af6c

margin: 0,

is indeed strange. I guess we should either always reset the margin, or never do it. I wish we could use flex gap but we can't, it would not be coherent with https://mui.com/material-ui/getting-started/supported-platforms/#browser.

[leonbloy]

To those working on this issue:

The spacing in Stack causes many problems.

It does not plays nicely with Divider (variant=middle) and also with margins of children ( it treats the first item differently)

Here's a sample

https://codesandbox.io/s/wandering-pine-mdluzs?file=/demo.tsx

In this example, all works ok without spacing. With spacing={2} , the Divider middle attribute is lost, and the children margins after the first one are messed up

const STYLE = {
  border: "1px solid grey",
  borderRadius: 1,
  "& svg": { m: 1.5 }
};

export default function VerticalDividerMiddle() {
  return (
    <div>
      <Stack sx={STYLE} direction="row">
        <FormatBoldIcon />
        <FormatAlignRightIcon />
        <FormatBoldIcon />
        <Divider orientation="vertical" variant="middle" flexItem />
        <FormatAlignRightIcon />
        <FormatBoldIcon />
      </Stack>
      <div>...</div>
      <Stack spacing={2} sx={STYLE} direction="row">
        <FormatBoldIcon />
        <FormatAlignRightIcon />
        <FormatBoldIcon />
        <Divider orientation="vertical" variant="middle" flexItem />
        <FormatAlignRightIcon />
        <FormatBoldIcon />
      </Stack>
    </div>
  );
}