如何覆盖Material UI（MUI）组件的默认类样式

解决方案 #

1. 确保自定义根类正确挂载 #

你需要将useStyles生成的root类绑定到对应Card组件的className属性上，否则父级选择器无法命中对应的DOM节点，示例代码如下：

const classes = useStyles();

// 组件渲染部分
<Card className={classes.root}>
  <CardContent>
    {/* 内容 */}
  </CardContent>
</Card>

2. 处理样式优先级问题 #

如果挂载正确还是不生效，是因为MUI默认样式优先级高于你的自定义样式，可以用以下两种方式解决：

• 提升自定义选择器权重，重复父级选择器叠加优先级：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      '&& & .MuiCardContent-root:last-child': {
        padding: '0px'
      }
    }
  })
);

• 更推荐直接给CardContent组件绑定自定义类，避免全局样式污染：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    cardContentRoot: {
      padding: 0,
      '&:last-child': {
        paddingBottom: 0
      }
    }
  })
);

// 组件渲染部分
<Card>
  <CardContent classes={{ root: classes.cardContentRoot }}>
    {/* 内容 */}
  </CardContent>
</Card>

3. 适配MUI版本差异 #

如果你使用的是MUI v5版本，makeStyles已经属于兼容方案，更推荐使用styled组件或者sx属性来实现样式覆盖，写法更简洁：

// sx属性示例
<CardContent sx={{ p: 0, '&:last-child': { pb: 0 } }}>
  {/* 内容 */}
</CardContent>

内容的提问来源于stack exchange，提问作者Tamjid