如何在MUI 5中实现带边框标准变体的类MuiCallout组件？

MuiCallout是MUI官网内部使用的未对外暴露组件，你可以通过自定义Alert组件的样式来实现完全一致的效果，以下是两种可行方案：

方案一：自定义组件快速实现 #

直接通过sx属性为Alert添加边框、浅色背景等样式，同时支持不同 severity 类型的样式匹配：

import Alert from '@mui/material/Alert';

const MuiCallout = ({ children, severity = 'warning' }) => {
  // 匹配官网MuiCallout的样式参数
  const severityConfigs = {
    warning: {
      bgColor: '#fffbeb',
      borderColor: '#fbbf24',
      textColor: '#92400e',
    },
    info: {
      bgColor: '#eff6ff',
      borderColor: '#3b82f6',
      textColor: '#1e40af',
    },
    error: {
      bgColor: '#fef2f2',
      borderColor: '#ef4444',
      textColor: '#991b1b',
    },
    success: {
      bgColor: '#f0fdf4',
      borderColor: '#10b981',
      textColor: '#065f46',
    },
  };

  const config = severityConfigs[severity];

  return (
    <Alert
      variant="standard"
      sx={{
        backgroundColor: config.bgColor,
        border: `1px solid ${config.borderColor}`,
        color: config.textColor,
        borderRadius: '8px',
        padding: '16px',
        // 移除Alert默认的message内边距，贴近官网样式
        '& .MuiAlert-message': { padding: 0 },
      }}
    >
      {children}
    </Alert>
  );
};

// 使用示例
<MuiCallout severity="warning">
  This API is at an unstable stage and is subject to change in the future.
</MuiCallout>

方案二：全局主题配置（适合多处复用） #

如果需要在项目多个地方使用该风格组件，可以通过自定义MUI主题全局配置Alert的standard变体：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import Alert from '@mui/material/Alert';

const customTheme = createTheme({
  components: {
    MuiAlert: {
      variants: [
        {
          props: { variant: 'standard', severity: 'warning' },
          style: {
            backgroundColor: '#fffbeb',
            border: '1px solid #fbbf24',
            color: '#92400e',
            borderRadius: '8px',
            '& .MuiAlert-message': { padding: 0 },
          },
        },
        {
          props: { variant: 'standard', severity: 'info' },
          style: {
            backgroundColor: '#eff6ff',
            border: '1px solid #3b82f6',
            color: '#1e40af',
            borderRadius: '8px',
            '& .MuiAlert-message': { padding: 0 },
          },
        },
        // 可继续添加error、success等severity的配置
      ],
    },
  },
});

// 在项目根组件或需要的地方包裹ThemeProvider
<ThemeProvider theme={customTheme}>
  <Alert variant="standard" severity="warning">
    This API is at an unstable stage and is subject to change in the future.
  </Alert>
</ThemeProvider>

注意事项 #

• 上述颜色值均来自MUI官网MuiCallout组件的实际样式，你可以通过浏览器开发者工具查看官网元素样式，进一步调整参数以完全匹配需求。
• 移除MuiAlert-message的内边距是为了贴近官网MuiCallout的排版，若需要保留内边距可删除该样式规则。

内容的提问来源于stack exchange，提问作者unnonusr