[TextField] Clipped label when used as first child in DialogContent

[reckter]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using a TextField as the first child in a DialogContent, the top part of the label is clipped and not readable.

Expected behavior 🤔

It shouldn't be clipped, and instead be visible.

Steps to reproduce 🕹

Simple demo here: https://codesandbox.io/s/still-surf-tweos

      <Dialog open>
        <DialogTitle>Title</DialogTitle>
        <DialogContent>
          <TextField value="test" label="Label" />
        </DialogContent>
      </Dialog>

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

The sandbox uses 5.2.0
Browser that I tested: chrome and safari, both have the issue

[reckter]

Our current workaround is

const theme = useTheme
//....

<DialogContent sx={{ pt: `${theme.spacing(2)} !important` }}>

Which feels very clunky, as the !important is necessary, because there is a rule than overrides the padding-top, which is more precise than the rule the sx prop generrates.

[abhinav-22-tech]

Check out this: https://codesandbox.io/s/competent-brown-28n7c?file=/src/Demo.tsx

<DialogContent>
        <TextField value="test" label="Label" margin="dense" />
</DialogContent>

After applying margin=" dense" it works fine. It will adjust the vertical spacing.

[supervanya]

Our current workaround is

const theme = useTheme
//....

<DialogContent sx={{ pt: `${theme.spacing(2)} !important` }}>

Which feels very clunky, as the !important is necessary, because there is a rule than overrides the padding-top, which is more precise than the rule the sx prop generrates.

We did a global override which works really well, see my comment here: #31185 (comment)

[sp-reach]

There is a pretty good stackblitz to reproduce the error here: Issue 40188
TLDN (too long didn't navigate)
Stackblitz Web
Stackblitz Editor