如何自定义react-toastify？样式修改无效问题求助

样式不生效的常见原因与修复 #

• 导入顺序错误：自定义SCSS必须在官方样式之后导入，否则会被默认样式覆盖。正确导入顺序：

  @import 'react-toastify/dist/ReactToastify.css';
  @import './your-custom-toast.scss';
  

• 选择器优先级不足：官方样式的选择器权重较高，需使用更具体的选择器。比如给ToastContainer添加自定义类名，再嵌套编写样式：

  .custom-toast-container .Toastify__toast {
    // 自定义样式
  }
  

• SCSS编译配置问题：确认项目已正确配置SCSS预处理器（如Create React App需安装sass包），确保自定义SCSS能被正常编译。
• 未指定自定义类名：在ToastContainer或toast调用时，需通过className/toastClassName传递自定义类名，否则样式无法绑定到目标元素。

实现目标样式的代码示例 #

针对你需要的圆角浅色背景、紧凑布局、清晰文字的通知效果，可使用以下代码：

SCSS 样式 #

// custom-toast.scss
.custom-toast-container .Toastify__toast {
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  min-height: auto;
}

.custom-toast-container .Toastify__toast-body {
  font-size: 14px;
  color: #333;
  padding: 0;
}

.custom-toast-container .Toastify__progress-bar {
  background-color: #4285f4;
  height: 3px;
}

React 组件使用 #

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './custom-toast.scss';

// 触发通知
const showToast = () => toast('操作成功！');

// 渲染容器
<ToastContainer
  className="custom-toast-container"
  position="top-right"
  autoClose={3000}
/>

验证步骤 #

1. 打开浏览器开发者工具，选中通知元素，检查Styles面板中自定义样式是否被应用（未被划掉）。
2. 若样式被覆盖，可临时添加!important验证（不推荐长期使用，建议优化选择器权重）。

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