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

Posted 2023-02-22

【中文标题】如何在 Material-UI 中为对话框设置高度？

【英文标题】：How can I set a height to a Dialog in 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，但没有成功。

【参考方案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。