Currently, I am using the fullScreen property on the Material UI Dialog ponent (which acts as a modal on the screen) as remended 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?

Currently, I am using the fullScreen property on the Material UI Dialog ponent (which acts as a modal on the screen) as remended 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?

• javascript
• reactjs
• material-ui

1 Answer 1

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