CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Jack Joseph
Jack Joseph

Reputation: 129

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

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?

Upvotes: 4

Views: 9172

Answers (1)

e.a.
e.a.

Reputation: 948

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

Upvotes: 6

Related Questions