search

fkhadra / react-toastify

React notification made easy 🚀 !
https://fkhadra.github.io/react-toastify/introduction
MIT License
12.33k stars 676 forks source link

toastClassName and className (on the toast) are not respected #1126

Open 0tii opened 2 weeks ago

0tii commented 2 weeks ago

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 ^