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

Posted 2023-02-22

【中文标题】在较小的设备中覆盖填充 React Material UI

【英文标题】：Override padding in smaller devices React material UI

【发布时间】：2020-02-26 00:35:11

【问题描述】：

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

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

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

我已经检查了 DOM，发现网格间距 3 的内边距为 12 像素。

我试过了

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

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

【问题讨论】：

请创建一个code sandbox 来重现您的问题。这将使为您提供正确的语法变得更加容易/更快。确定您希望更改的方式（在主题中还是在组件中）并在沙箱中使用该方法。

【参考方案1】：

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

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