MUI alert component conflicts in css

Question

I'm using Material UI 5.10.11 and the MuiAlert component sometimes goes wrong. This is what it should looks like when severity='error'

However in some pages, it looks like this

Below are my codes. Can anyone have a look at it and try to figure out what's wrong with my work?

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

Many thanks in advance!

The fault is due to the css that I spotted out in the screenshots.

Answer 1

It looks like problem comes from Mui component class name which is MuiPaper-root . In page with white background it overrites because probably some other Mui components have same class name and you are using white background with this component or you have a css file with white background assigned to MuiPaper-root class in that page