如何为React-Toastify特定Toast消息设置容器自定义宽度？

方法1：利用:has() CSS伪类（推荐现代浏览器环境） #

通过CSS选择器精准匹配包含目标Toast的容器，仅在特定场景下修改宽度，无需额外JS逻辑：

/* 仅当容器内存在toastError类的Toast时，设置容器宽度 */
.Toastify__toast-container:has(.toastError) {
  width: 640px;
}

/* 其他Toast保持原有默认宽度 */
.Toastify__toast-container:not(:has(.toastError)) {
  width: auto; /* 替换为你的默认宽度值 */
}

注意：:has()伪类支持Chrome、Edge、Safari 15.4+，若需兼容旧版浏览器，可选用方法2。

方法2：动态操作DOM（兼容全浏览器） #

通过指定Toast唯一ID，结合DOM监听实现容器样式的动态修改与恢复：

步骤1：调用Toast时指定唯一ID #

toast(<Alert id="alert" type="error" heading="Error" headingLevel='h1' children={msg} />, 
  { className: "toastError", toastId: "custom-error-toast" });

步骤2：监听Toast状态并修改容器样式 #

import { useEffect } from 'react';
import { toast } from 'react-toastify';

// 在组件中添加监听逻辑
useEffect(() => {
  const handleToastOpen = ({ toastId }) => {
    if (toastId !== "custom-error-toast") return;
    const toastElement = document.getElementById(toastId);
    const container = toastElement?.closest('.Toastify__toast-container');
    container?.classList.add('toast-error-container');
  };

  const handleToastClose = ({ toastId }) => {
    if (toastId !== "custom-error-toast") return;
    const toastElement = document.getElementById(toastId);
    const container = toastElement?.closest('.Toastify__toast-container');
    container?.classList.remove('toast-error-container');
  };

  toast.onChange((payload) => {
    payload.type === 'added' && handleToastOpen(payload);
    payload.type === 'removed' && handleToastClose(payload);
  });

  return () => toast.offChange();
}, []);

步骤3：定义容器样式类 #

.toast-error-container {
  width: 640px !important; /* 用!important覆盖默认样式，或提升选择器权重 */
}

方法3：多ToastContainer隔离场景 #

如果不同宽度的Toast场景划分明确，可在页面中放置多个ToastContainer，调用时指定目标容器：

// 页面中添加两个独立容器
<ToastContainer 
  className="default-toast-container" 
  position="top-center" 
/>
<ToastContainer 
  className="error-toast-container" 
  position="top-center" 
  style={{ width: 640 }}
  containerId="error-container"
/>

// 调用错误Toast时指定目标容器
toast(<Alert ... />, { 
  className: "toastError",
  containerId: "error-container"
});

该方法无需DOM操作，逻辑更直观，适合场景清晰的业务需求。

内容的提问来源于stack exchange，提问作者gene b.