在移动设备上触摸屏幕边缘的元素 (Material UI)

Question

MUI 新手。我的元素似乎触及了手机屏幕的边缘。 我尝试添加填充和边距，但它只会挤压元素。

https://codesandbox.io/s/proud-architecture-69b0jv?file=/App.js:2727-3108&resolutionWidth=748&resolutionHeight=675（纸质元素在第94行）

 <Paper
   sx={{
   pt: 1,
   border: 1,
   boxShadow: 0,
   justifyContent: "center",
   margin: "auto",
   mt: 1,
   maxWidth: 800,
   flexGrow: 1,
   backgroundColor: (theme) =>
      theme.palette.mode === "dark" ? "#1A2027" : "#fff"
   }}
 >

Answer 1

我用 div 包裹了你的纸张并给了它一些填充，这样你就可以保持自动边距和最大宽度。

return (
          //Main element
          <div style={{ padding: "0 5px" }}>
          <Paper
            sx={{
              pt: 1,
              border: 1,
              boxShadow: 0,
              margin: "auto",
              justifyContent: "center",
              mt: 1,
              maxWidth: 800,
              flexGrow: 1,
              backgroundColor: (theme) =>
                theme.palette.mode === "dark" ? "#1A2027" : "#fff"
            }}
          >
            <Grid container spacing={2}>
              <Grid item>
                <ButtonBase sx={{ width: 128, height: 128 }}>
                  <Img alt="complex" src={logo} />
                </ButtonBase>
              </Grid>
              <Grid item xs={12} sm container>
                <Grid item xs container direction="column" spacing={2}>
                  <Grid item xs>
                    <Typography
                      gutterBottom
                      variant="subtitle1"
                      component="div"
                    >
                      {post.flight_icao}
                    </Typography>

                    <Typography>{dtconvert}</Typography>

                    <Typography variant="body2" gutterBottom>
                      {post.dep_icao}
                    </Typography>

                    <Paper
                      sx={{
                        width: "-moz-fit-content",
                        width: "fit-content",
                        minWidth: 90,
                        boxShadow: 0,
                        borderRadius: 0,
                        backgroundColor: bs
                      }}
                    >
                      <Typography
                        variant="body2"
                        color="white"
                        sx={{
                          textAlign: "center",
                          fontWeight: "bold",
                          alignItems: "center",
                          display: "flex"
                        }}
                      >
                        <Img
                          alt="statusimg"
                          src={statusimg}
                          width={20}
                          height={20}
                          sx={{
                            mr: 0.4,
                            ml: 0.4
                          }}
                        />{" "}
                        {status}
                      </Typography>
                    </Paper>
                  </Grid>
                  <Grid item></Grid>
                </Grid>
                <Grid item>
                  <Typography
                    variant="subtitle1"
                    component="div"
                    sx={{ px: 2, p: 2 }}
                  >
                    {post.aircraft_icao}
                  </Typography>
                </Grid>
              </Grid>
            </Grid>
          </Paper>
          </div>
        );
      })}
    </div>
  );
}

export default App;