To customize the appearance of scrollPaper within the <Dialog />
Using a Functional Component
const useStyles = makeStyles({
scrollPaper: {
alignItems: 'baseline' // default center
}
});
const classes = useStyles();
Using a Classical Component
const styles = theme => createStyles({
scrollPaper: {
alignItems: 'baseline' // default center
}
});
const { classes } = props;
export default withStyles(styles)(YourComponent);
Implementation
<Dialog classes={{scrollPaper: classes.scrollPaper }}>
For further information, refer to the Material-UI documentation on Dialog CSS API
Anatomy of Dialog in HTML as observed in dev tools
Select 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>
https://i.sstatic.net/C6zqK.png
In your code snippet
import { withStyles } from '@material-ui/styles';
const styles = theme => createStyles({ // update to this
scrollPaper: {
alignItems: 'baseline'
}
});
class Shop extends Component {
render(){
const { classes } = this.props; // include 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); // utilize `styles` instead of `class`