Question

我有一个第3、6、3列的网格，我的网格间距也为3。

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

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

我检查了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',
            }
          },
        },
      },
    },
  }));

似乎没有一个真正可行的方法，我在哪里犯错？

Answer 1

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

MuiGrid: {
            'spacing-xs-3': {
                '& > $root': {
                   [Your styles go here]
                },
            },
        },

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

1 个答案: