[material-ui] Dialog Title overrides the Dialog Content padding

[ghost]

Title gets rid of the top padding on Dialog Content and it gets overridden by:

.MuiDialogTitle-root+.css-141nu3b-MuiDialogContent-root {
padding-top: 0;
}

This is on "@material-ui/core": "^5.0.0-beta.1".

This is an issue if you have the whole title background a different color than the content. Content will bump right up to it.

Example:

https://codesandbox.io/s/hopeful-fermi-0v850?file=/src/App.js:514-515

#26795

[AlvesJorge]

Hi Chase,
Try using style instead of sx to set the paddingTop.
Sandbox example
Don't know why this happens but seems sometimes when mui is stubborn , using style instead of sx works.There's probably a reason out there not to do this, but since I don't know what it is I can't tell you not to do it haha.
Cheers

[eps1lon]

You codesandbox doesn't include any styles related to padding. Could you clarify what the issue is?

Or are you just suggesting that the content should have padding as well?

[ghost]

@eps1lon I am suggesting content should have padding as well as a default. That way it can be modified in a theme. For example: this doesn't work and gets overridden and paddingTop gets set to 0

    MuiDialogContent: {
      styleOverrides: {
        root: {
          padding: "4.0rem",
        },
      },
    },
    

[karpolan]

Got same issue

[ghost]

Got same issue

There is a work around. Add “dividers” prop to DialogContent and style the dividers to the color of the dialog background. This will add your padding like you expect

[karpolan]

Got same issue

There is a work around. Add “dividers” prop to DialogContent and style the dividers to the color of the dialog background. This will add your padding like you expect

This dialog was working for years, but new MUI overrides the styling I temporary wrap content with <Box pt={1}>...

[Shrammer1]

I have this same issue:

My Theme:

getMuiTheme = () => createTheme({	
		
		components:{
			MuiDialogContent: {
				styleOverrides: {
				  root: {
					padding: '10px',
				  },
				},
			},
			MuiDialogTitle:{
				styleOverrides: {
					root: {
						
					},
				  },
			},
		},
		button:{
			backgroundColor:"white",
			border: "0px"
		},
	  })

Dev tools CSS:

Temporary work around is to apply style directly to dialog content component:
<DialogContent style={{paddingTop: '10px'}}> <FormControl fullWidth> {transferUserList} </FormControl> </DialogContent>

[VinceVachon]

Why was this closed? Has it been fixed?

[limboguard]

I am getting the same issue, was this closed because it was fixed?

[mbrookes]

It was closed because it had been left as incomplete for a few months, where in fact @chaserda had provided additional information, but the incomplete status hadn't been removed. Moving back to "needs triage"

[bradstdev]

I have numerous dialogs in my app, so I did a hacky option, which I would rather remove when this is fixed:

      MuiDialogContent: {
        styleOverrides: {
          root: {
            padding: `${theme.spacing(1.5, 2.5)}!important`,
          },
        },
      },

[jamestalton]

ran into this issue

[aweibell]

Also struggled a long time with this. Appears to me as a bug that one need to override with !important to get any padding for the DialogContent.

[leachtucker]

Just running into this issue now after migrating from MUI V4 to V5

[mohd676]

Document work around

add document.body.classList.add('fix_body_padding_open'); on top of your react hooks component

css
.fix_body_padding{
&_open{
padding-right: 0px !important;
}
}

then remove it onClose

document.body.classList.remove('fix_body_padding_open');

[iribeiro-workwave]

Can be overwritten like this as well.

<DialogContent sx={{ '.MuiDialogContent-root&.MuiDialogContent-root': { pt: 1 } }}>

[huanqizh]

I resolve this problem with this way:

MuiDialog: {
        styleOverrides: {
            paper: {
                "& > div.MuiDialogContent-root": { paddingTop: "20px" }
            }
        }
    }

Use the more higher poiority css selector to cover it in createTheme.

[jsduffy]

Same issue