admin 管理员组

文章数量: 1086019

I am currently creating a popup dialog. However, my dialog is positioned popping up in the center.

How do I make the position at the very top of the page when I press the popup btn?

Here is my code

      <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>

I am currently creating a popup dialog. However, my dialog is positioned popping up in the center.

How do I make the position at the very top of the page when I press the popup btn?

Here is my code

      <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>
  • javascript
  • html
  • css
  • reactjs
  • material-ui
Share Improve this question edited Apr 8, 2020 at 7:25 keikai 15.2k10 gold badges55 silver badges72 bronze badges asked Apr 8, 2020 at 6:03 user12990369user12990369
Add a ment  | 

1 Answer 1

Reset to default 7

You can override the style of scrollPaper in <Dialog />

Functional ponent

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

const classes = useStyles();

Classical ponent

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

const { classes } = props;

export default withStyles(styles)(YourComponent);

Usage

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

Refer: document of Material-UI Dialog CSS API

The HTML structure of Dialog which we can see from dev tools

Choose the MuiDialog-scrollPaper from below

<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>

In your code

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`

本文标签： javascriptHow to position Dialog to top in MaterialUIStack Overflow

版权声明：本文标题：javascript - How to position Dialog to top in Material-UI - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744076150a2529386.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。