时间戳

首页 > 解决方案 > 删除此 Grid 元素右侧的额外空白，React 应用程序与 Material UI

reactjs - 删除此 Grid 元素右侧的额外空白，React 应用程序与 Material UI

问题描述

我无法删除此弹出框右侧的额外空白，内容采用网格样式设置。如果我使用 Box 元素，我可以修复它，但是，主要开发人员要求我不要使用 Box 元素。

我的组件

export const GridWrapper = styled(Grid)(({ theme }) => ({
  pointerEvents: 'none',
  padding: theme.spacing(1),
}));

        <GridWrapper container>
          <Grid item xs={6}>
            <Typography color="primary">Waiver</Typography>
            <Typography>{name}</Typography>

            <Typography color="primary">Service</Typography>
            <Typography>
              {serviceCategory}
            </Typography>

            <Typography color="primary">Account</Typography>
            <Typography>{account}</Typography>
          </Grid>

          <Grid item xs={6}>
            <Typography color="primary">Waiver T</Typography>
            <Typography>{type}</Typography>

            <Typography color="primary">Service</Typography>
            <Typography>{''}</Typography>

            <Typography color="primary">Alt</Typography>
            <Typography>{alt}</Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography color="primary">Increase</Typography>
            <Typography>
              {increase}
            </Typography>
          </Grid>
          <Grid item xs={6}>
            <Typography color="primary">Index</Typography>
            <Typography>
              {index}
            </Typography>
          </Grid>
        </GridWrapper>

任何人都知道任何道具或方法让我设计这个以减少右侧出现的空白？这发生在上面显示的第二个网格项目中。

标签： reactjsmaterial-uispacing

解决方案

Just going to take a shot in the dark here. I made a codesandbox of your code, but it doesn't really highlight the problem.

When you have a grid in material-ui, it fills up all available horizontal space in some parent. Using grid items, you can display on a 12 column grid.

If you set 2 columns to xs={6}, each item is going to take up 50% of the parent, regardless of their content. I believe the problem you're facing is that you want your second column to actually shrink to fit the content. However, you also have additional fullwidth columns that would maintain the parent's width even if you did shrink the second column.

So from what I can tell, all you need to do is make the parent container smaller. So if this is a popover, and you want it to be 240px wide, you'd set the max-width to 240px. Example: https://codesandbox.io/s/pensive-water-k6sth

I'd also experiment with making the second column xs={4} and the first column xs={8} or similar. Making the column smaller itself will also reduce the whitespace on the right side, however it'll expand the whitespace on the left side.

推荐阅读