时间戳

首页 > 解决方案 > 如何在 Material-UI 中将对话框置于顶部

javascript - 如何在 Material-UI 中将对话框置于顶部

问题描述

我目前正在创建一个弹出对话框。但是，我的对话框定位在中间弹出。

当我按下弹出 btn 时，如何使位置位于页面的最顶部？

这是我的代码

      <div>
      <div id="so_reg" className="buy_btn" onClick={this.onClickCashBuy.bind(this)}>
         Pop up button
        </div>
         <Dialog className="dialog" modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
               <Test product={{price: this.state.buy_cash_type}} />
      </Dialog>
   </div>

标签： javascripthtmlcssreactjsmaterial-ui

解决方案

您可以覆盖scrollPaper的样式<Dialog />

功能组件

const useStyles = makeStyles({
  scrollPaper: {
    alignItems: 'baseline'  // default center
  }
});

const classes = useStyles();

经典组件

const styles = theme => createStyles({
  scrollPaper: {
    alignItems: 'baseline'  // default center
  }
});

const { classes } = props;

export default withStyles(styles)(YourComponent);

用法

<Dialog classes={{scrollPaper: classes.scrollPaper }}>

参考：Material-UI Dialog CSS API文档

我们可以从开发工具中看到的 Dialog 的 HTML 结构

从下面选择MuiDialog-scrollPaper

<div
  class="MuiDialog-container MuiDialog-scrollPaper makeStyles-dialog-163"
  role="none presentation"
  tabindex="-1"
  style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
>
  <div
    class="MuiPaper-root MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
    role="dialog"
    aria-labelledby="simple-dialog-title"
  >
    ...
  </div>
</div>

在此处输入图像描述

在您的代码中

import { withStyles } from '@material-ui/styles';

const styles = theme => createStyles({ // change to this
    scrollPaper: {
      alignItems: 'baseline'
    }
});

class Shop extends Component {
  render(){

const { classes } = this.props;  // add this

  return(
<Dialog className="dialog" classes={{scrollPaper: classes.scrollPaper }} modal={false} open={this.state.buy_cash_popup} onRequestClose={this.onClickBuyCashCancel} style={{color: 'green'}} >
 <Test product={{price: this.state.buy_cash_type}} />
 </Dialog>
export default withStyles(styles)(Shop);  // `styles` here rather than `class`

推荐阅读