如何在MD Toast中添加MUI图标且不报错、与文本对齐？

问题原因 #

你遇到的“无法读取未定义的属性”错误，核心原因是react-toastify新版本的icon属性要求传入返回React元素的函数，而非直接传入JSX元素。直接传递<InfoOutlinedIcon />会导致内部逻辑调用时读取未定义的属性，触发报错。

解决方案1：调整icon属性为函数形式 #

将icon的值改为返回MUI图标的函数，即可正常渲染图标：

import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import { toast } from 'react-toastify';

toast("Information Toast", {
  icon: () => <InfoOutlinedIcon />, // 用函数包裹图标元素
  autoClose: false,
});

解决方案2：自定义Toast组件（彻底解决对齐问题） #

如果需要精准控制图标与长文本的对齐效果，完全自定义Toast内容是最优方案：

import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import { toast } from 'react-toastify';

// 自定义Toast组件，自由控制布局与样式
const CustomInfoToast = ({ closeToast }) => (
  <div style={{ 
    display: 'flex', 
    alignItems: 'center', 
    gap: '12px', 
    padding: '12px 16px' 
  }}>
    <InfoOutlinedIcon color="info" fontSize="small" />
    <div style={{ flex: 1 }}>
      Information Toast（此处可放置任意长度文本，图标会始终与文本垂直居中对齐）
    </div>
    <button 
      onClick={closeToast} 
      style={{ 
        background: 'none', 
        border: 'none', 
        cursor: 'pointer',
        fontSize: '18px'
      }}
    >
      ×
    </button>
  </div>
);

// 调用自定义Toast
toast(<CustomInfoToast />);

额外必要检查 #

确保项目中已正确引入并渲染ToastContainer组件，否则Toast无法显示：

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'; // 必须引入样式文件

function App() {
  return (
    <div className="App">
      {/* 你的其他应用内容 */}
      <ToastContainer />
    </div>
  );
}

export default App;

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