Material UI 5.10.11中MuiAlert组件CSS样式异常排查求助

我正在使用Material UI 5.10.11版本，MuiAlert组件在部分页面出现样式异常。当severity='error'时，正常样式应为，但在部分页面显示为。经截图排查确认异常由CSS冲突导致，以下是我的实现代码，请求帮忙找出问题所在。

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

内容的提问来源于stack exchange，提问作者namln-hust