Progress bar doesn't change color

[formidabilus]

Progress bar doesn't change color and I don't know what I'm doing wrong.

I have tried many things, I will post an example using progressClassName:

toast.success("Message sent succesfully!", {
      icon: <EnvelopeOpenIcon className="text-[#F7AB0A]" />,
      theme: "dark",
      className: "text-[#F7AB0A]",
      bodyClassName: "text-[#F7AB0A]",
      progressClassName: "bg-[#F7AB0A]",
    }

I am using Tailwind 3.2.6 and Nextjx 12.3.0.

I tried to change it in ToastContainer component like <ToastContainer progressClassName: "bg-[#F7AB0A]"/>, not working, I tried to override variables in global.css:

:root {
  --toastify-color-progress-success: #f7ab0a;
  --toastify-color-progress-error: text-red-700;
}

and using tailwind.config.js:

theme: {
    extend: {
      colors: {
        "toastify-color-progress-success":
          "var(--toastify-color-progress-success)",
        "toastify-color-progress-error": "var(--toastify-color-progress-error)",
      },
    },
  },

I don't know if I'm doing something wrong or it just doesn't work right now.

[fkhadra]

Hey @formidabilus, may I ask you to reproduce your issue in codesandbox ? thanks

[jacobschwantes]

@fkhadra I'm having the same issue. It seems that initially after the css variable is changed it works but after a page reload it goes back to using defaults. Codesandbox

[fkhadra]

Hey @jacobschwantes, thanks for the reproduction. The devil is in the detail. You have to import react-toastify stylesheet before style.css

import "react-toastify/dist/ReactToastify.css";
import "./styles.css";
import { toast, ToastContainer } from "react-toastify";

[jacobschwantes]

@fkhadra Such a silly mistake. Thanks for the fix.

[jacobschwantes]

@fkhadra Actually after deploying, it doesn't work. Works fine in dev server but in production the same behavior happens.

[fkhadra]

@jacobschwantes what do you use to build, can you share a repo. It's probably the same issue happening

[marcus-wishes]

I have the same problem. The eact-toastify stylesheet is imported before my style.css. Also in the production bundle the .Toastify__toast-theme--lightis defined before the Tailwind classes.

I noticed the following in the Firefox dev tools:

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

change to:

.Toastify__progress-bar-theme--light {
  background-color: var(--toastify-color-progress-light);
}

This works, also the Tailwind bg- classes use the background-color property. If I do it vice versa (change the tailwind bg- class to use background instead of background-color the progress bar also gets colored according to the tailwind class.

What for me works as a workaround:

progressStyle: {
    "--toastify-color-progress-light": "invalid",
} as CSSProperties,
progressClassName: "bg-red-500",

If i use progressStyle to set the --toastify-color-progress-light to ANY value, the one from the Tailwind class is used. Even if I use "red" instead of "invalid", still the tailwind class is used. A bit weird...

Edit: If I change the Sass files in the repository to target "background-color" instead of "background" it also works as expected. I can make a PR if this is a solution, but I am not sure since background is a shorthand. If people do not only want to set the color but also other properties of the shorthand, it will not work.