Left Align Promise Toast Message

[lsbyerley]

Hello, nice job on V2!

I'm implementing a promise toast in my application and I'd like to align the message for a promise toast to be left aligned. When passing in styles to the loading object, it doesn't seem to have any affect on the message.

I've tried:

loading: {
  style: {
    justifyContent: 'flex-start',
  }
}

My toast is full width across the bottom and, as you can see, the message is still center aligned. It seems the styles for the message are not customizable?

https://github.com/timolins/react-hot-toast/blob/69cd7fe426ccdac66af5477f5bf0df87166d6ee1/src/components/toast-bar.tsx#L37

[timolins]

Hi @lsbyerley! Currently there is no easy styling API for message wrapper inside the toast.

Two options I see:

1. Overwrite it with CSS. You can add a className to your toasts, and then write some custom CSS.

   .toast div:last-child {
   justify-content: flex-start;
   }

2. With JS, by modify the renderer. You can check out a CodeSandbox here: https://codesandbox.io/s/react-hot-toast-left-align-message-spkjt?file=/src/App.js

Hope this helps.