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

您需要override some of the default behavior的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);

这将确保对话框的高度为视口的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

如果您使用的是较新版本的 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+，它甚至没有列在 {{ 3}})。因此，请改用 paper 道具。

灵感来自official dialog css api docs。

如何在材质中为对话框设置高度-ui？

3 个答案: