1

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

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

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

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

我试过这个

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',
            }
          },
        },
      },
    },
  }));

似乎没有一个真正起作用，我在哪里犯错了？

4

1 回答 1

-1

您只需要使用$rootelement 而不是$item，就像这样

MuiGrid: {
            'spacing-xs-3': {
                '& > $root': {
                   [Your styles go here]
                },
            },
        },
于 2020-05-29T09:04:49.730 回答