如何在 Material-UI 中為對話框設置高度？

Question

我將使用具有自定義寬度的Dialog的 Material-UI 示例：

const customContentStyle = {
  width: '100%',
  maxWidth: 'none',
};

// some omitted code

<Dialog
  title="Dialog With Custom Width"
  actions={actions}
  modal={true}
  contentStyle={customContentStyle}
  open={this.state.open}
>
  This dialog spans the entire width of the screen.
</Dialog>

我知道我可以設置自定義寬度，因為我已經覆蓋了maxWidth ，但是我希望能夠對高度做同樣的事情，以便我可以調整對話框的高度。 我嘗試將maxHeight設置為none並設置height ，但我沒有運氣。

Answer 1

您需要覆蓋Dialog的一些默認行為。 它的paper類實現了一個帶有柱狀 flex-direction 的 flexbox，並定義了90vh的最大高度。 這允許 Dialog 在達到視口可見高度的 90% 時增長到其內容並顯示滾動條。

如果您需要將對話框高度設置為視口的某個百分比，請覆蓋paper類，以類似於以下示例的方式定義min-height和max-height ：

import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Dialog from 'material-ui/Dialog';

const styles = {
    dialogPaper: {
        minHeight: '80vh',
        maxHeight: '80vh',
    },
};

const YourDialog = ({ classes }) => (
    <Dialog classes={{ paper: classes.dialogPaper }}>
        <div>dialogishness</div>
    </Dialog>
);

export default withStyles(styles)(YourDialog);

這將確保 Dialog 的高度為視口的 80%。

Answer 2

改為設置 DialogContent 子項的高度。 對話框將增長以包含其內容。 您可以使用 css / classname 等來執行此操作...但要內聯執行此操作，這里有一個代碼片段：

<Dialog
        open={open}
        fullWidth
        maxWidth='lg' // set width according to defined material ui breakpoints
        onClose={handleClose}
>
        <DialogContent
        style={{height:'600px'}}> // set height by pixels, percentage, etc
            //insert content here
        </DialogContent>
</Dialog>

Answer 3

在MUI v5中，您可以使用以下代碼覆蓋內部Paper組件的max-height值：

<Dialog
  PaperProps={{
    sx: {
      width: "50%",
      maxHeight: 300
    }
  }}
  {...other}
>

現場演示

Answer 4

如果您使用的是較新版本的 material-ui，請使用：

import MuiDialog from '@material-ui/core/Dialog';

const Dialog = withStyles((theme) => ({
  paper: {
    height: '100%' // 100% is for full height or anything else what you need
  },
}))(MuiDialog);

export default function SomeComponentThatUsesCustomizedDialog() {
    return (
        <Dialog>
        ...
        </Dialog>
    )
}

在接受的答案中使用的dialogPaper道具對我不起作用，並在控制台中引發錯誤（我們使用的是 material-ui v.4.11+，它甚至沒有在官方對話框 css api docs中列出）。 因此，請改用paper道具。

靈感來自 官方示例。

Answer 5

一些答案似乎過於復雜，這是一個快速而干凈的內聯方法，適用於 MUI v4，也可能適用於 v5：

<Dialog
  open={true}
  onClose={onClose}
  ... and other props
  PaperProps={{ style: {
    minHeight: '90%',
    maxHeight: '90%',
  }}}
>