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

Question

I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case.

I don't want to overcomplicate it, I just want to change background color, maybe borders, font color, etc.

I tried class overriding which documentation is saying about - it's not working.

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

I tried my own className and pass it to certein toast - it's not working.

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

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

And these themed classes are not even added to the toast.success() or toast.error()

I tried to override values in the core css file that im importing, and it's not working. And if I set background-color: red to the actual class that is added, then I get red background on toast.success() as well.

Here is documentation .

How to deal with this?

Answer 1

using classnames should be the solution to your problem

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