Custom 'full screen' height for the Material UI Dialog modal component

Question

Currently, I am using the fullScreen property on the Material UI Dialog component (which acts as a modal on the screen) as recommended in the docs, like this:

import useMediaQuery from '@material-ui/core/useMediaQuery';


function MyComponent() {

  const theme = useTheme();

  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

  return <Dialog fullScreen={fullScreen} />

}

Unfortunately, this causes the Dialog modal to cover the navbar at the top of the screen. I would like to override the height of the Dialog modal, but I am not sure how.

Is anyone able to help?

Answer 1

Just pass a className to it & give it the top value equal to your AppBar's height. here is the sandbox