Css 材质UI网格：如何只在内部元素之间留出空间，而不在外部

我遇到了这个问题，在一个MUI网格组件中有几个材质UI卡。我希望这个网格的左侧与上面的标题完全垂直对齐

我尝试在网格容器上放置一个空格={2}，但这会导致网格项的填充也在左侧，这使得它不再与上面的标题对齐。有没有一种方法可以简单地在不同的网格项之间的内部添加此填充

<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>

霍维尔·斯帕尔·马恩德利克斯是谁？
setAmounts（state=>（{…state，monthlySavings:value}））
//当他们移动滑块时，我们是否应该检查场景？
//如果（！selected[name]）setSelected（（state）=>（{…state[name]：true}））；
}
颜色class='primary'
值={amounts.monthlySavings}
min={monthlySavingGoal.sliderValues.min}
max={monthlySavingGoal.sliderValues.max}
步骤={monthlySavingGoal.sliderValues.step}
/>

---

默认情况下，材质ui将为网格项组件添加一个檐槽，您只需修改网格组件并添加一些样式或类道具，以删除填充：

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

在您的组件中：

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>   
)

const classes=useStyles（）
返回(
{/*代码的其余部分*/}
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>   
)