reactjs - 如何让Material ui对话框显示在屏幕高度的前半部分？

Question

我正在使用 MUI 中的对话框组件，它运行良好。

我想修改现有的行为，使对话框不位于垂直轴的中心，而是定位应用程序。自上而下 30%。

现状:

 | 

 |

DIALOG

 |

 |

目标:

 | 
DIALOG
 |

 |

 |

Answer 1

您需要通过创建一个新类并使用classes将其分配给Dialog组件来修改.MuiDialog-paper的css属性。 Sandbox

import React from 'react';
import { makeStyles, Dialog } from '@material-ui/core';

const useStyles = makeStyles({
  newPosOfDialog: {
    position: "absolute",
    top: "30%",
    left: "50%",
    transform: "translate(-50%, -50%)",
  }
});


function Example() {
  const classes = useStyles();

  return (
    <Dialog
      classes={{
        paper: classes.newPosOfDialog
      }}

      /* rest of the props */
    >
       ........ 
    </Dialog>
  );
}