Css 通过组件溢出的元素会发生反应

在React项目中，我创建了一个充值钱包页面，其中有充值按钮来充值硬币。通过覆盖另一页来创建新页。所有元素都是在材质UI中创建的。由于某种原因，所有元素都会通过组件溢出。这可能是CSS问题。防止溢流的最佳解决方案是什么

下面是代码参考

const navScrollStyle = makeStyles((theme) => ({
  root: {
    marginTop: '70px',
    display: 'table',
    overflowY: 'hidden',
    maxWidth: 'auto',
    display: 'flex',
    justifyContent: 'center',
  }
}));

const navBodyStyle = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    top: "0px",
    position: "absolute",
    width: "100%",
    height: '100vh',
    textAlign: 'center',
    background: 'white',
    zIndex: '9',
    height: '100%',
    overflowY: 'auto'
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const gridClassStyle = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    position: 'fixed',
    top: '0px',
    background: 'white',
    flexWrap: "nowrap",
    boxShadow: '5px 10px 18px #888888',
    
  },
  paper: {
    padding: theme.spacing(2),
    textAlign: 'center',
    color: theme.palette.text.secondary,
  },
  menuButton: {
    marginRight: theme.spacing(2),
    color: "purple"
  },
  title: {
    flexGrow: 1,
    textAlign: "center",
    color: "black"
  }
}));

const useStyles5 = makeStyles((theme) => ({
  root: {
    '& > *': {
      margin: theme.spacing(1),
    },
    textAlign: 'center',
    width: '100%'
  },
}));

const NewPage = () => {

  const navBody = navBodyStyle()
  const navScroll = navScrollStyle()
  const gridClass = gridClassStyle()

  const classes5 = useStyles5()

  const NavPart = () => (
    <Grid className={gridClass.root} container spacing={3}>
      <Grid item xs={4} style={{ textAlign: 'left' }}>
        <IconButton
          edge="start"
          className={gridClass.menuButton}
          color="inherit"
          aria-label="menu"
        >
          <Link to="/">
              <ArrowBackIcon />
            </Link>
        </IconButton>
      </Grid>
      <Grid item xs={4} style={{ textAlign: 'center', justifyContent: 'center' }}>
        <Typography variant="h6" className={gridClass.title}>
          <h2>Wallet</h2>
        </Typography>
      </Grid>
      <Grid item xs={4} style={{ textAlign: 'right', marginTop: '2%' }}>
        <IconButton
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
        >
          <AccountCircle style={{ fontSize: "30px" }} />
        </IconButton>
      </Grid>
    </Grid>
  )
  return (
    <div className={navBody.root}>
        {NavPart()}
        <div className={navScroll.root}>
          <div className={classes5.root}>
            <Button variant="contained" color="secondary">
              <Link to="/purchaseCoins">
                Recharge Wallet
        </Link>
            </Button>
            <br />

            <Button variant="contained" color="secondary">
              <Link to="/purchaseCoins">
                Recharge Wallet
              </Link>
            </Button>
            <br />
          </div>

        </div>
    </div>

  )
}

const-navScrollStyle=makeStyles（（主题）=>({
根目录：{
marginTop:'70px'，
显示：“表格”，
溢出：“隐藏”，
maxWidth:'自动'，
显示：“flex”，
为内容辩护：“中心”，
}
}));
const navBodyStyle=制作样式（（主题）=>({
根目录：{
flexGrow:1，
顶部：“0px”，
位置：“绝对”，
宽度：“100%”，
高度：“100vh”，
textAlign:'中心'，
背景：“白色”，
zIndex:'9'，
高度：“100%”，
溢出：“自动”
},
菜单按钮：{
边缘光：主题。间距（2），
颜色：“紫色”
},
标题：{
flexGrow:1，
textAlign：“居中”，
颜色：“黑色”
}
}));
const gridClassStyle=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
位置：'固定'，
顶部：“0px”，
背景：“白色”，
flexWrap：“nowrap”，
boxShadow:'5px10px 18px#8888888'，
},
论文：{
填充：主题。间距（2），
textAlign:'中心'，
颜色：theme.palete.text.secondary，
},
菜单按钮：{
边缘光：主题。间距（2），
颜色：“紫色”
},
标题：{
flexGrow:1，
textAlign：“居中”，
颜色：“黑色”
}
}));
const useStyle5=makeStyles（（主题）=>({
根目录：{
'& > *': {
边距：主题。间距（1），
},
textAlign:'中心'，
宽度：“100%”
},
}));
const NewPage=（）=>{
常量navBody=navBodyStyle（）
常量navScroll=navScrollStyle（）
const gridClass=gridClassStyle（）
const classes5=useStyle5（）
const NavPart=（）=>(

以下是代码沙盒链接，以便更清楚地了解：。
当页面加载时，请单击“WALLET”（钱包）按钮。
您给钱包组件提供了70px，我认为您可以提供calc（100%-70px）的高度值。您必须调整高度，使其与页边空白顶部px的高度相同。
您给钱包组件提供了70px，我认为您可以提供calc（100%-70px）的高度值。您必须将高度调整为页边距顶部px。
我更改了
navScrollStyle
的
marginTop
，overflowY更改为auto，并为
gridClassStyle
指定了一个zIndex。我想这就是您要找的。请检查在线版本我更改了
navScrollStyle的
marginTop
e
，overflowY设置为auto，并为
gridClassStyle
分配了一个zIndex。我想这就是您要找的。请检查在线版本
请让我知道它是否适用于您是的，终于完成了！！！！请让我知道它是否适用于您是的，终于完成了！！！！