I am facing an issue with displaying notifications on my Gatsby blog whenever the service worker updates. I am using a MUI Snackbar toast for this purpose. However, sometimes the styling of the toast is not applied correctly and it ends up looking like this:
https://i.stack.imgur.com/Cvw4X.png
It should actually look like this:
https://i.stack.imgur.com/RsTwl.png
After examining the code, I noticed that the <Snackbar> and MUIAlert components are not outputting the correct classes on their respective div elements.
The relevant code snippet is as follows:
export default function Layout({ children }: { children: ReactNode }): ReactElement {
const [toastOpenState, setToastOpenState] = React.useState(isBrowser() && Boolean(localStorage.getItem('serviceWorkerUpdated')));
function handleToastClose(): void {
setToastOpenState(false);
}
return (
<>
<TopNav/>
<Snackbar className="toast"
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
open={toastOpenState}
onClose={handleToastClose}
TransitionComponent={Transition}
>
<MuiAlert severity="success" variant="filled" elevation={6} onClose={handleToastClose}>
A new version is available.
<Button onClick={() => {
localStorage.removeItem('serviceWorkerUpdated');
window.location.reload();
}}>Reload</Button>
</MuiAlert>
</Snackbar>
<div style={{ flex: 1, margin: '0 1em' }}>
{children}
</div>
<Footer />
</>
);
}