什么可能導致 MUI Snackbar 無法生成正確的 class 名稱？

Question

當服務工作者更新時，我正在嘗試使用MUI Snackbar toast在我的 Gatsby 博客上顯示通知。 有時吐司沒有任何樣式，看起來像這樣：

它應該如下所示：

我可以看到<Snackbar>和MUIAlert沒有 output 在他們的div上正確的類。

代碼如下：

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 />
    </>
  );
}

Answer 1

解決方案是將 toast 的open state 從onEffect掛鈎設置為true ：

  const [toastOpenState, setToastOpenState] = React.useState(false);
  useEffect(() => {
    if (localStorage.getItem('serviceWorkerUpdated'))
      setToastOpenState(true);
  }, []);

  // Called by clicking the close button
  function handleToastClose(): void {
    setToastOpenState(false);
  }

  return (
    <>
      ... same stuff
    </>
  );
}