如何移除toaster库默认带!important的背景图片？

以下几种方法可以解决这个问题：

• 用更高优先级的CSS选择器覆盖
  给目标元素的父容器加个自定义类，通过组合选择器提升优先级，再配合!important就能覆盖原库的样式：

  .my-toast-wrapper .toast-error {
    background-image: none !important;
    /* 也可以换成你需要的背景色或图片 */
  }
  

• 用JavaScript动态强制修改样式
  如果CSS覆盖不好使，直接操作DOM元素的样式属性，强制清除背景图：

  const errorToasts = document.querySelectorAll('.toast-error');
  errorToasts.forEach(toast => {
    // 第三个参数指定important，强制覆盖原有带!important的样式
    toast.style.setProperty('background-image', 'none', 'important');
  });
  

• 检查库的配置项，替换默认类
  多数toaster库支持初始化时传入自定义类，直接替换默认的toast-error，这样就能完全用自己的样式：

  // 示例（具体写法参考你用的库的文档）
  toastr.error('出错了', {
    className: 'my-custom-error-toast'
  });
  

  然后给my-custom-error-toast写自己的样式即可，不用管原库的默认样式。

内容的提问来源于stack exchange，提问作者David-JSON