css - 元素通过 React 中的组件溢出

问题描述

在一个 React 项目中，我创建了一个充值钱包页面，其中有充值按钮来充值硬币。通过覆盖另一个页面来创建一个新页面。所有元素都是在 Material 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>

  )
}

我特意添加了充值钱包按钮来测试充值。

为了清楚起见，这里是代码和框链接： https ://codesandbox.io/s/react-material-forked-71op5 。页面加载时请点击“WALLET”按钮

标签： cssreactjs

css - 元素通过 React 中的组件溢出

问题描述

解决方案

推荐阅读