如何在 Material-UI 中为对话框设置高度？答案

【问题标题】：How can I set a height to a Dialog in Material-UI?如何在 Material-UI 中为对话框设置高度？
【发布时间】：2018-05-21 17:39:57
【问题描述】：

我将使用具有自定义宽度的 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，但没有成功。

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

您需要Dialog 中的override some of the default behavior。它的paper 类实现了一个具有柱状弹性方向的弹性盒，并定义了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%。

【讨论】：

是否有内联方式来做到这一点？这会创建一个新的 Dialog 组件，但如果我只想让一个对话框稍有不同怎么办？
您可以在使用 Dialog 的任何地方覆盖纸张类。您不必创建新组件。在示例中，假设 YourDialog 是一个实现 Dialog 的组件。
是的，我没有让它这样工作。最后，我将内容包装在一个 div 中，并将样式应用于其中。填充，最小宽度。我仍在使用 material-ui 的学习曲线，所以这可能不是正确的方法......但如果其他人遇到挑战，这是一种方法。
我将 classes=xxx 添加到我已经拥有的中，效果很好。

【解决方案2】：

改为设置 DialogContent 子项的高度。对话框将增长以包含其内容。您可以使用 css / classname 等来执行此操作...但要内联执行此操作，这里有一个 code-sn-p：

<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>

【讨论】：

谢谢，很简单。

【解决方案3】：

在MUI v5中，您可以使用以下代码覆盖内部Paper 组件的max-height 值：

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

现场演示

【讨论】：

【解决方案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+，它甚至没有在official dialog css api docs 中列出） .因此，请改用 paper 属性。

灵感来自official example。

【讨论】：