在较小的设备中覆盖填充React Material UI

Question

我有一个第3,6,3列的网格，并且我也给出了3的网格间距。

对于lg，md屏幕设备的尺寸看起来还可以，即网格之间的间距。但是，当我减小屏幕尺寸时，网格之间的间距保持不变，这看起来不太好

我想要的是lg和md设备的网格之间的间隔为3，而sm＆xs设备的网格之间的间隔为0，所以我在网格周围看不到任何填充。

我检查了DOM并发现网格间距3的填充为12px。

我已经尝试过]

const theme = createMuiTheme({
  ..., // Other default things
  overrides: {
    MuiGrid: {
      'spacing-xs-3': {
        '& > $item': {
          padding: 'none',
        },
      },
    },
  },
});
这是删除填充的工作，显然不是所有设备尺寸的填充，但我希望仅对于较小尺寸的设备才删除该填充。

我在组件内部这样使用它

  const useStyles = makeStyles(theme => ({
     ...,
     overrides: { // This part , I tried both with and without overrides key
       MuiGrid: {
        'spacing-xs-3': {
          '& > $item': {
            [theme.breakpoints.down('md')]: {
              padding: 'none',
            }
          },
        },
      },
    },
  }));
似乎没有一个真正可行的方法，我在哪里犯错？

我有一个第3、6、3列的网格，并且我也给出了3的网格间距。对于lg，md屏幕设备尺寸，它看起来还可以，即网格之间的间距。但是，当我减小屏幕尺寸之间的间距时...

Answer 1

您只需要使用$root元素而不是$item，像这样