Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px.
.MuiAlert-icon {
display: flex;
opacity: 0.9;
padding: 7px 0;
font-size: 22px;
margin-right: 12px;
}
I am attempting to override this padding using the makeStyles feature from Material UI. Below is the code I have implemented:
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;
I'm unsure of where the 7px padding originates from, but it appears to be a default setting within the Icon component. My objective is to simply eliminate this padding by setting it to zero.