javascript 如何将文本a放入React Grid，同时在框之间保持一点间隙

我一直在努力修改这个网格，以便在框之间有一些空间，同时也适合框内的所有文本。我目前的代码是响应式的，但每我修复一件事，另一个项目就会被破坏，看起来不正确。例如，当我适合所有的文本（假设此框包含的文本比其他框多）放入框中，则数字的位置开始上移，并且与其他框看起来不一致。
以下是我的代码到目前为止在我的沙箱：Responsive Sandbox

import { Box, Grid, Paper, Typography } from "@mui/material";
import { styled } from "@mui/material/styles";

const Contained = styled(Box)({
  backgroundColor: "rgba(241, 243, 246, 1)",
  fontFamily: "Roboto",
  height: "100vh",
  width: "100vw"
});

const ResponsiveGridBox = styled(Box)`
  // Mobile Screen
  grid-template-columns: repeat(3, auto);

  // Tablet
  @media (min-width: 768px) {
    grid-template-columns: repeat(5, auto);
  }

  // Desktop
  @media (min-width: 1024px) {
    grid-template-columns: repeat(9, auto);
  }
`;

const Appbox = styled("div")({
  backgroundColor: "#fff",
  border: "1px solid #E4E9F2",
  borderRadius: "4px",
  color: "#64768C",
  display: "flex",
  flexDirection: "column",
  justifyContent: "center",
  alignItems: "center",
  padding: "16px",
  textAlign: "center",
  height: "92px",
  width: "133px",
  "&:hover": {
    boxShadow: "0px 3px 6px #00000029"
  }
});

const StatsNumber = styled(Typography)({
  fontSize: "32px",
  fontWeight: 600
});

const StatsNumberContainer = styled("div")({
  height: "36px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
});

const LabelContainer = styled("div")({
  height: "20px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  flexWrap: "wrap",
  whiteSpace: "normal",
  maxWidth: "100%"
});

const labels = [
  "Quotes",
  "Applications",
  "Identity Verified",
  "Underwriting Questions Submitted",
  "Consent",
  "Approved",
  "Policy Submitted",
  "Not Paid",
  "Policy Issued"
];

function ResponsiveGrid() {
  return (
    <Contained>
      <Typography
        align="left"
        variant="h1"
        sx={{ margin: "0px 32px 24px 32px", fontSize: "24px" }}
      >
        Dashboard
      </Typography>
      <Grid item xl={18} xs={8}>
        <Paper sx={{ padding: "32px", height: "100%" }}>
          <ResponsiveGridBox gap={1} display="grid">
            {labels.map((label) => (
              <Grid key={label} item lg={1} md={3} xs={3}>
                <Appbox sx={{ width: "100%" }}>
                  <StatsNumberContainer>
                    <StatsNumber>33</StatsNumber>
                  </StatsNumberContainer>
                  <LabelContainer>
                    <Typography>{label}</Typography>
                  </LabelContainer>
                </Appbox>
              </Grid>
            ))}
          </ResponsiveGridBox>
        </Paper>
      </Grid>
    </Contained>
  );
}

export default ResponsiveGrid;

这就是我想要达到的目标

至少有三个问题。
首先，<Appbox>的宽度不应该是100%，因为它是一个网格项;width: 100%意味着它应该与其父级一样宽。完全删除sx属性。

// Change
<Appbox sx={{ width: "100%" }}>

// to
<Appbox>

其次，<LabelContainer>不应该有固定的高度，因为它有一个可能溢出的<Typography>子节点。

// Change
const LabelContainer = styled("div")({
  height: "20px",
  /* ... */
});

// to
const LabelContainer = styled("div")({
  /* ... */
});

第三，<Appbox>的justifyContent应该是start，而不是center。这会将它的每个子元素垂直对齐到框的顶部（主轴的start）。

// Change
const Appbox = styled("div")({
  /* ... */
  justifyContent: "center",
  /* ... */
});

// to
const Appbox = styled("div")({
  /* ... */
  justifyContent: "start",
  /* ... */
});

javascript 如何将文本a放入React Grid，同时在框之间保持一点间隙

1条答案

相关问题

热门标签

最新问答