如何覆盖从“@ .MuiAlert-icon”继承的填充？

Question

我需要覆盖从“@.MuiAlert-icon”继承的填充。 chrome的inspector显示

.MuiAlert-icon {
    display: flex;
    opacity: 0.9;
    padding: 7px 0;
    font-size: 22px;
    margin-right: 12px;
}

我正在尝试使用材质 UI 中的 makeStyles 覆盖它。这是我正在尝试的代码。

import Alert from "@material-ui/lab/Alert";
import Icon from "@material-ui/core/Icon";
import {  makeStyles } from "@material-ui/core";
  
const useStyles = makeStyles({
  icon: {
    overflow: 'visible',
    "& .MuiAlert-icon": {
      padding: 'none',
    }

  },
  outerTheme: {

  }
});
  
interface idVerifyProps {
    status: string; 
  }


const IDverify = ({ status }: idVerifyProps) => {
  const classes = useStyles();
  const svgIcon = (
    <Icon className={classes.icon}>
      <img alt="edit" src="../../../checkIcon.png" />
    </Icon>
  );
    return (
      <div >
        <Alert severity="error" style={{ backgroundColor: "#E6FFE9",}} icon={svgIcon}>{status}</Alert>
      </div>
    );
  };
  export default IDverify;

我不知道 7px 填充是从哪里来的。无论出于何种原因，我假设它只是 Icon 组件的默认设置。我只需要将填充设置为零。

Answer 1

你需要使用 classes={{ icon: }}

alertIcon: {
  padding: 0,
},

return (
      <div >
         <Alert
            severity="error"
            style={{ backgroundColor: "#E6FFE9",}}
            icon={svgIcon}
            classes={{ icon: classes.alertIcon }}
         >
           {status}
         </Alert>
      </div>
    );