如何在全局 Material UI 中为 Alert 组件添加自定义关闭图标

Question

我们可以通过主题全局自定义Alert组件中显示的严重性图标：

  MuiAlert: {
    defaultProps: {
      iconMapping: {
        info: <Info/>,
        success: <Success/>,
        warning: <Warning>,
        error: <Error/>,
      }
    },
    styleOverrides: {
    ...
    }

但是，有没有一种方法可以对定义OnClose属性时显示的关闭图标执行相同的操作？

  /**
   * Callback fired when the component requests to be closed.
   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
   * @param {React.SyntheticEvent} event The event source of the callback.
   */
  onClose?: (event: React.SyntheticEvent) => void;

我知道替代解决方案是创建从警报组件派生的我自己的样式组件并设置我的自定义关闭图标，但希望避免这种情况并看看是否可以通过主题组件自定义来实现。

否则我认为这是一个很好的选择，也许应该提出一个请求。

Answer 1

是的，这是可能的！查看MUI Alert api 文档，有一个属性components，您可以在其中定义要为关闭图标显示的图标，与按钮相同。

然后，当您创建自定义主题时，您只需将该components道具添加到defaultProps.

请注意，我们传递的不是实际值<HomeIcon />，而是函数。

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Alert from "@mui/material/Alert";
import HomeIcon from "@mui/icons-material/Home";

const theme = createTheme({
  components: {
    // Name of the component
    MuiAlert: {
      defaultProps: {
        // The default props to change
        components: {
          CloseIcon: HomeIcon,
        },
      },
    },
  },
});

export default function DefaultProps() {
  return (
    <ThemeProvider theme={theme}>
      <Alert onClose={() => {}}>Your alert with custom icon :)</Alert>
    </ThemeProvider>
  );
}