Textfield's label gets clipped when inside a Dialog

When using a Textfield as the first child of DialogContent:

export default function App() {
  return (
        <Dialog open={true}>
          <DialogTitle>Hey</DialogTitle>
          <DialogContent>
          <TextField
              fullWidth
              id='name'
              label={'Foo'}
              name='name'
              required
              type='text'
              value={'Bar'}
          />
          </DialogContent>
        </Dialog>
  );
}

its label (when using `variant="outlined") gets clipped. See codebox sample. Any way to fix this problem? e.g. by customizing the theme?

You can easily fix that issue by adding some margin to the TextField like the following.

sx={{ marginTop: 2 }}

Or you could wrap the TextField using Box inside the DialogContent like the following.

<Box p={1}>
  <TextField
    ...
  />
</Box>