如何在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;

我知道另一种解决方案是从Alert组件中创建自己的样式组件，并设置自定义关闭图标，但我想避免这种情况，并看看是否可以通过主题组件自定义。

否则，我认为这将是一个很好的，也许应该打开一个请求。

Answer 1

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

然后当你创建你的自定义主题时，你可以简单地将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>
);
}