My experience with Material UI 5.10.11 has been mostly positive, but I have encountered some issues with the MuiAlert component. When setting severity to 'error', it should look like this https://i.sstatic.net/A1KIE.png
However, on certain pages, it appears differently https://i.sstatic.net/6PPOx.png
I've included my code below for reference. If anyone could take a look and help me identify what might be causing the problem, I would greatly appreciate it.
import React, { useState, useEffect } from 'react';
import { Snackbar } from '@mui/material';
import MuiAlert from '@mui/material/Alert';
const Alert = React.forwardRef(function Alert(props, ref) {
return <MuiAlert elevation={24} ref={ref} variant="filled" {...props} />;
});
export default function MessageDialog(props) {
const defaultPosition = {
vertical: 'top',
horizontal: 'center'
};
const autoHideDuration = 5000;
const [open, setOpen] = useState(false);
useEffect(() => {
let timeoutId;
if (props.open) {
setOpen(true);
timeoutId = setTimeout(() => {
setOpen(false);
}, autoHideDuration);
}
return () => {
clearTimeout(timeoutId);
};
}, [props.open]);
return (
<>
<Snackbar
anchorOrigin={{
vertical: defaultPosition.vertical,
horizontal: defaultPosition.horizontal
}}
open={open}
>
<Alert severity={props.type} sx={{ width: '100%' }}>
{props.children}
</Alert>
</Snackbar>
</>
);
}
Your assistance is greatly appreciated!
The issue seems to be related to the css as shown in the screenshots.