首页 > 解决方案 > Material UI Collapse 从页面顶部滑动

问题描述

正如标题所说,我希望 Collapse 从这个演示中的某个点滑动:https ://codesandbox.io/s/material-demo-forked-ienlu?file=/demo.js但它从顶部向下滑动这页纸。下面是我的代码...

export default function Bill(){
const classes = useStyles()

const [showBillHistory, setShowBillHistory] = useState(false)


function toggleShowBillHistory(){
    setShowBillHistory(!showBillHistory);
  }

return(
    <div align="center">
        <AppBar  className = {classes.appBar_root} position="static">
            <Toolbar>
            <Typography align="center" variant="h6" className={classes.title}>
                View and Download Previous Bill Details <IconButton onClick={toggleShowBillHistory}>< SystemUpdateAlt style={{color:"white"}} /></IconButton>
            </Typography>
            </Toolbar>
        </AppBar> 
        <div>
            <Collapse  in={showBillHistory}>
                <Paper>
                    <Typography align="center" variant="h6" className={classes.title}>
                        View and Download Previous Bill Details 
                    </Typography>
                </Paper> 
            </Collapse>             
        </div>
    </div>
);

}

标签: javascriptreactjsmaterial-ui

解决方案


推荐阅读