如何覆盖Material UI中继承自@ .MuiAlert-icon的padding属性

问题根源 #

你当前写法有两个核心问题导致样式不生效：

• 选择器逻辑错误：你写的& .MuiAlert-icon是匹配classes.icon对应元素的子元素中的.MuiAlert-icon节点，但实际上.MuiAlert-icon是Alert组件内部包裹你传入的自定义icon的外层容器，你的Icon组件是它的子元素，这个选择器完全匹配不到目标节点。
• 样式值错误：CSS中padding的有效值没有none，要取消内边距需要设为0。

正确实现方案 #

推荐使用MUI官方提供的组件内置类覆写方式，不会污染全局样式，修改后的代码如下：

import Alert from "@material-ui/lab/Alert";
import Icon from "@material-ui/core/Icon";
import { makeStyles } from "@material-ui/core";
  
const useStyles = makeStyles({
  // 用于覆写Alert内置的icon容器样式
  customAlertIcon: {
    padding: 0,
  },
  // 用于自定义Icon组件本身的样式
  customIcon: {
    overflow: 'visible',
  }
});
  
interface idVerifyProps {
  status: string; 
}

const IDverify = ({ status }: idVerifyProps) => {
  const classes = useStyles();
  const svgIcon = (
    <Icon className={classes.customIcon}>
      <img alt="edit" src="../../../checkIcon.png" />
    </Icon>
  );
  return (
    <div >
      <Alert 
        severity="error" 
        style={{ backgroundColor: "#E6FFE9" }}
        icon={svgIcon}
        // 给Alert传入classes属性，覆写对应内置类的样式
        classes={{
          icon: classes.customAlertIcon
        }}
      >
        {status}
      </Alert>
    </div>
  );
};

export default IDverify;

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