emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
8.37k stars 263 forks source link

JSX returning translations change toast styling #432

Open jimmailcamp opened 3 months ago

jimmailcamp commented 3 months ago

Describe the feature / bug 📝:

When using a component to return the message, which is often the case because I'm using i18n translation components quite often, the styling of the toasts change. For example, the default icon on success or info dissapears and the fontweight changes.

yes I understand the solution is to return a string, but in this specific case that's NOT possible in certain scenarios due to invalid hook calls outside of components.

Steps to reproduce the bug 🔁:

  1. Create a tsx component that returns a string in a fragment.
  2. toast.success();
  3. Styling is different from when passing plain string