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

Question

我需要覆盖从"@继承的填充。MuiAlert图标"；。来自chrome的检查员显示

.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;

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

Answer 1

您需要使用classes={{icon:<your_class>}}

alertIcon: {
padding: 0,
},

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