Necesito anular el relleno heredado de "@ .MuiAlert-icon". El inspector de Chrome muestra
.MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; margin-right: 12px; }Estoy tratando de anularlo usando makeStyles from material UI. Aquí está el código que estoy intentando.
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;No sé de dónde viene el relleno de 7px. Supongo que es solo una configuración predeterminada por cualquier motivo con el componente Icon. Solo necesito establecer el relleno en cero.
necesitas usar clases={{ icono: <tu_clase> }}
alertIcon: { padding: 0, }, return ( <div > <Alert severity="error" style={{ backgroundColor: "#E6FFE9",}} icon={svgIcon} classes={{ icon: classes.alertIcon }} > {status} </Alert> </div> );