如何在 Material UI 中使用 CSS 选择器 >答案

【问题标题】：How to use the CSS selector > in Material UI如何在 Material UI 中使用 CSS 选择器 >
【发布时间】：2021-07-02 07:41:57
【问题描述】：

我正在使用 Material UI 并尝试使用具有此选择器的 withStyles 覆盖 Grid 项目中的一些 css：

.MuiGrid-spacing-xs-2 > .MuiGrid-item

如果我使用 withStyle 定位项目，由于其特殊性，它会被上述选择器覆盖。我试过'spacing-xs-2 item'：

const CustomGrid = withStyles({
  'spacing-xs-2 > item': {
    marginLeft: '22px',
    top: '-6px',
    backgroundColor: 'lightgrey',
    padding: '0px 10px 0px 0px',
    borderRadius: ' 5px',
  },
})(Grid);

但不工作。如何在材质 ui 中使用选择器 >？

【问题讨论】：

你为什么不在那个元素上添加 className 并设置它的样式？
因为 .MuiGrid-spacing-xs-2 > .MuiGrid-item 仍然会覆盖它
如果你想覆盖 Material UI 中的一些核心元素，你必须在那里使用 Theme，这里有一个链接 - material-ui.com/customization/theming

标签： reactjs material-ui

【解决方案1】：

这可行，但我不会这样做

const CustomGridItem = withStyles({
  item: {
    '.MuiGrid-spacing-xs-2 > &': {
      // your styles
    }
  }
})(Grid);

相反，您可以简单地提高类样式规则的特异性

const useStyles = makeStyles({
  item: {
    marginLeft: 22,
    top: -6,
    backgroundColor: "lightgrey",
    borderRadius: 5,
    "&&": { // => .makeStyles-item.makeStyles-item
      padding: "0px 10px 0px 0px"
    }
  }
});

<Grid item className={classes.item}>
  // content
</Grid>

【讨论】：