如何在Material-UI对话框中使用ResponsiveFullScreen

时间:2017-07-06 14:26:26

标签: material-ui

我使用Material-UI的预发布,您可以使用网格布局并实现断点。我已经使用了隐藏的组件和网格,现在我想使用对话框的ResponsiveFullScreen组件。问题是我不知道如何使用它和官方页面只是给出一点解释。

我可以使用Hidden来改变两个不同的对话框,但我不想以这种方式复制我的代码。那么是否有人知道如何使用它?我只想让对话在xs断点处成为全屏。

我使用扩展的React.Component类构建我的对话框,并在render()中返回一个带有我自己内容的Material-UI对话框。

1 个答案:

答案 0 :(得分:5)

最后,我知道如何使用withResponsiveFullScreen。您必须直接将它用于Dialog Material-UI类,然后使用返回的组件来创建对话框。

这里和示例:

var ResponsiveDialog = withResponsiveFullScreen()(Dialog);
class MyDialog extends React.Component {
    constructor(props){ super(props); };

    render(){
        return (
            <ResponsiveDialog>
                <DialogTitle></DialogTitle>
                <DialogContent></DialogContent>
            </ResponsiveDialog>
        );
    }
}

重要提示:请勿在渲染功能中使用withResponsiveFullScreen。

使用断点更改断点#pas和object:

var ResponsiveDialog = withResponsiveFullScreen({breakpoint: 'xs'})(Dialog);