React Toastify文本与关闭按钮未和Toast容器对齐问题求助

问题分析 #

你的Toast提示框内的文本和关闭按钮未与容器正确对齐，这大概率是自定义样式与组件默认样式冲突导致的——尤其你在showErrorToast中直接设置了style属性，但未处理内边距和元素对齐规则。

修复方案 #

方案1：调整自定义样式的内边距与对齐

直接在showErrorToast的style配置中补充内边距和对齐规则：

export const showErrorToast = (message) => {
  toast.error(message, {
    position: "bottom-center",
    autoClose: 3000,
    hideProgressBar: false,
    closeOnClick: true,
    pauseOnHover: true,
    draggable: true,
    progress: undefined,
    progressStyle: { background: "#DBDBDB" },
    theme: "colored",
    style: { 
      background: "#ED664B",
      padding: "12px 16px", // 调整内边距让内容适配容器
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between"
    },
  });
};

方案2：覆盖组件默认类样式

如果方案1效果不够彻底，可在全局CSS文件中覆盖React Toastify的默认类样式：

/* 全局CSS文件中添加 */
.Toastify__toast--error {
  padding: 12px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.Toastify__toast-body {
  margin: 0 !important;
  flex: 1;
}

方案3：排查全局CSS冲突

检查项目中是否有全局样式（比如*选择器、body重置样式）干扰了Toast组件，例如：

/* 这类全局样式可能破坏组件内部布局 */
* {
  margin: 0;
  padding: 0;
  /* 若存在其他非常规属性，需排查是否影响组件 */
}

确保全局样式未意外覆盖Toast组件内部元素的默认布局规则。

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