Material UI 网格：如何在内部而不是外部的元素之间仅留空间答案

【问题标题】：Material UI grid: how only space between elements on the inside, not outsideMaterial UI 网格：如何在内部而不是外部的元素之间仅留空间
【发布时间】：2021-08-14 00:49:21
【问题描述】：

我遇到了这个问题，我在 MUI Grid 组件中有多个 Material UI Cards。我希望这个网格的左侧与上面的标题完全垂直对齐。

我尝试在 Grid 容器上放置一个 spacing={2} ，但这会导致 Grid 项目的填充也位于左侧，这使得它不再与上面的标题对齐。有没有办法在不同的 Grid 项目之间简单地在内部添加这种填充？

<Box my={2}>
    <Typography variant='h6'>
        Hoeveel spaart u maandelijks tot uw pensioen?
    </Typography>
</Box>
<Grid className={classes.scenarioBlock} container spacing={2}>
    <Grid item xs={12} sm={6}>
        <ScenarioOption selected {...monthlySavingGoal}>
            <CustomSlider
                onChange={
                  value =>
                    setAmounts(state => ({ ...state, monthlySavings: value }))
                  // should we check the scenario when they move the slider?
                  // if (!selected[name]) setSelected((state) => ({ ...state, [name]: true }));
                }
                color='primary'
                value={amounts.monthlySavings}
                min={monthlySavingGoal.sliderValues.min}
                max={monthlySavingGoal.sliderValues.max}
                step={monthlySavingGoal.sliderValues.step}
              />
        </ScenarioOption>
    </Grid></Grid>

【问题讨论】：

标签： css reactjs material-ui jss

【解决方案1】：

默认情况下material ui会为Grid item组件添加一个gutter，你只需要修改grid组件并添加一些移除padding的样式或类prop：

// Rest of the code
<Grid item xs={12} sm={6} style={{padding: 0}}>
</Grid>

您还可以使用材质 UI makeStyles 使用自定义类名，并将该类应用到 Grid 项目组件。

const useStyles = makeStyles(() => ({
  item: {
    padding: 0,
  },
}))

在你的组件中：

const classes = useStyles()

return (
 {/* Rest of the code*/}
 <Grid 
  item
  xs={12}
  sm={6}
  classes={{
   // Here's the override with your custom item class.
   item: classes.item,
  }}
 >
 </Grid>   
)

【讨论】：