如何在材质中为对话框设置高度-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为无和设置height,但我没有运气.

Answer 1

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

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

现场演示

Answer 2

你需要覆盖某些缺省行为的的对话框.它的paper类实现了一个带有柱状弯曲方向的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 3

有些答案看起来过于复杂，这里有一个快速而干净的内联方法，适用于 MUI v4，也可能适用于 v5：

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

Answer 4

改为设置 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>