I'm trying to access the inner CSS of a MUI Alert by passing styles to the icon CSS rule of the Alert component.
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Alert from '@material-ui/lab/Alert';
import { styled } from "@material-ui/core/styles";
import { spacing } from "@material-ui/system";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
icon: {
marginTop: theme.spacing(2),
},
}),
);
const MyAlert = styled(Alert)(spacing);
export default function SimpleAlerts() {
const styles = useStyles();
return (
<div>
<MyAlert classes={{icon: styles.icon}}>This is an error alert — check it out!</MyAlert>
</div>
);
}
but even though the styling works fine, the console keeps complaining
Material-UI: The key `icon` provided to the classes prop is not implemented in WithStyles(ForwardRef(Alert)).
How can I avoid this (console) error?