0

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.

enter image description here

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. enter image description here

How to deal with this?

BlackH3art
  • 436
  • 1
  • 7
  • 15

1 Answers1

0

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
        })}
giosan
  • 291
  • 1
  • 4
  • 15
  • Can you provide some more details about this answer? Like full ```toast.error()``` call with options of customs styles or calsses? – BlackH3art Mar 30 '22 at 13:28
  • you need to return a boolean as a condition for the class to be used or not. for example if `className={classnames("Toastify__toast-theme--colored", {"toast-error": true})}` on the DOM you will see both `Toastify__toast-theme--colored` and `toast-error` classes. otherwise only `Toastify__toast-theme--colored` – giosan Mar 30 '22 at 13:34
  • Where am I supposed to specify that? Can you link some docs for that solution? When I simply copy and paste your code, Im getting errors and app is crashing. – BlackH3art Mar 30 '22 at 13:39
  • probably because you don't have the package installed in your app. here the [documentation](https://github.com/JedWatson/classnames) – giosan Mar 30 '22 at 13:43
  • How is this solving problem with styling in react-toastify? Is this an addiotional package from react-toastify for that purpose? – BlackH3art Mar 30 '22 at 13:48
  • no, it's an utility useful for conditional rendering of classes here an answer https://stackoverflow.com/questions/46792826/why-and-how-to-use-classnames-utility-in-react-components with different examples – giosan Mar 30 '22 at 13:51