1

in my app I use the ToastContainer component to display more than one type of toast. I do not want them both to have the same style, therefore I cannot use a styled ToastContainer to achieve what I want.

I know from the documentation for toastify that a toast can have it's own className for which you can specify the color etc. in a css file. But I want to have the css in the javascript file. But I have not yet found a way for it to work.

This is what I have come up with:

const notify = () => {
      toast(customMsg, {
        className: container,
        autoClose: false,
        closeOnClick: false,
        position: toast.POSITION.BOTTOM_RIGHT,
      });
  };

const container = {
  backgroundColor: 'yellow !important',
  color: ' black !important',
  borderRadius: '10px !important',
  border: '2px solid orange',
  width: '200px'
};

This does not work, but if I change className to "container" and put the styling in a css file it works. Is there a way for the className to be specified in the javascript file?

Ouroborus
  • 16,237
  • 4
  • 39
  • 62
FishyK
  • 121
  • 1
  • 7
  • Indirectly, by having the javascript create and add css to the styles. If you do that, you may as well have added the css to the styles directly. – Ouroborus Dec 27 '22 at 12:11

0 Answers0