如何根据主题更改吐司的背景颜色？反应烤面包

Question

我安装了react-toastify，并且我的toast正在工作，但我想根据主题添加一些自定义样式，但我看到的解决方案都不适合我的情况。

我不想让它变得过于复杂，我只是想改变背景颜色，也许是边框，字体颜色等。

我尝试了类覆盖文档中所说的内容 - 它不起作用。

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: white;
  background-color: red;
}

我尝试了自己的

className

并将其传递给某些吐司 - 它不起作用。

toast.error('here some error', {
          className: 'toast-error'
        });

.toast-error {
  color: white;
  background-color: red;
}

而且这些主题课程甚至没有添加到

toast.success()

或

toast.error()

我尝试覆盖正在导入的核心 css 文件中的值，但它不起作用。 如果我将

background-color: red

设置为添加的实际类，那么我也会在

toast.success()

上看到红色背景。

这里是文档。

如何处理这个问题？

Answer 1

使用类名应该可以解决您的问题

className={classnames("Toastify__toast-theme--colored", {
          "toast-error": // here the condition by which toast-error class should pop up
        })}

Answer 2

就我而言，以这种方式提供帮助： 在此输入图片描述 在此输入图片描述

从 chrome 中，我发现使用了 css (

class="Toastify__progress-bar Toastify__progress-bar--animated Toastify__progress-bar-theme--light Toastify__progress-bar--default"

) 中的哪个类 (

ReactToastify.css

)，并用以下内容从我的 css 覆盖了它：

.Toastify__progress-bar--default {

  background: linear-gradient( to right, blue, blue ) !important;

}

.Toastify__toast-body{

  color: blue;

}

（对于

Toastify__progress-bar--default

）： 在此输入图片描述

（对于

Toastify__progress-bar--error

） 在此输入图片描述

如您所见，我更改了进度条的颜色（仅适用于

Toastify__progress-bar--default

）和消息框中所有类型消息类型的文本颜色。 希望这对某人有所帮助。