reactjs - 如何在 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

您需要override some of the default behavior Dialog的。它的 paper 类实现了一个具有柱状弯曲方向的 Flexbox，并定义了 90vh 的最大高度。这允许对话框增长到其内容并在达到视口(viewport)可见高度的 90% 时显示滚动条。

如果您需要将对话框高度设置为视口(viewport)的某个百分比，请覆盖 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);

这将确保对话框的高度为视口(viewport)的 80%。