Material UI 对话框模态组件的自定义“全屏”高度

Question

目前，我按照文档中的建议使用 Material UI Dialog 组件（充当屏幕上的模式）上的 fullScreen 属性，如下所示：

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


function MyComponent() {

  const theme = useTheme();

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

  return <Dialog fullScreen={fullScreen} />

}

不幸的是，这会导致对话框模式覆盖屏幕顶部的导航栏。我想覆盖对话框模式的高度，但我不知道如何。

有人能帮忙吗？

Answer 1

只需向其传递一个 className 并为其指定等于 AppBar 高度的顶部值。这是沙箱