toastClassName and className (on the toast) are not respected

[0tii]

Do you want to request a feature or report a bug?

Bug maybe?

What is the current behavior?

styles supplied to the toast wrapper with either toastClassName in the ToastContainer or className in the toast function are not being rendered at all. Styles applied to the toast body through bodyClassName are rendered!

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

I am working in a enterprise-scale application and can not provide a reproducible example from this, but essentially it's nextjs with tailwind, these are the deps:

  "dependencies": {
    "@hookform/resolvers": "^3.4.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@tailwindcss/aspect-ratio": "^0.4.2",
    "axios": "^1.7.2",
    "country-flag-icons": "^1.5.11",
    "embla-carousel-react": "^8.1.1",
    "fuzzysort": "^2.0.4",
    "i18n-iso-countries": "^7.11.2",
    "i18next": "^23.11.4",
    "js-cookie": "^3.0.5",
    "jwt-decode": "^4.0.0",
    "lodash": "^4.17.21",
    "next": "14.2.3",
    "next-i18next": "^15.3.0",
    "react": "^18",
    "react-custom-scrollbars-2": "^4.5.0",
    "react-dom": "^18",
    "react-hook-form": "^7.51.5",
    "react-i18next": "^14.1.1",
    "react-toastify": "^10.0.5",
    "yup": "^1.4.0"
  },

_app.tsx excerpt

<ToastContainer
          icon={<Logo width={48} height={48} />}
          autoClose={3500}
          toastClassName={'bg-red-500'}
        />

toast call in custom toast wrapper:

export const toast = {
  error: (message: string, id?: string) => {
    toastify.error(message, {
      toastId: id,
      icon: <Logo width={48} height={48} fill='rgb(255 69 69)' />,
    });
  },
};

What is the expected behavior?

In this case i would like to see the background of the wrapper be red

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

see dependencies ^

[luiz504]

Mind the CSS class application sequence, I guess. I was debugging the same behavior, and the min.css classes are applied after the className API ones. Try to use the ! prefix to make it important.

I wish there was better integration with Tailwind and data-states usage instead of the context approach.