React-toastify: CSS Padding for toasts

[spiritedfang]

Hi there,

I'm having some problems adding a bit more padding to the left and right of text in toast notifications. I tried adding it through toastClassName (as shown below), but it doesn't change the size of the toast container (resulting in a line break in the toast notification). Is there another way I should be doing this?

Thanks

<ToastContainer
    toastClassName="toast"
    position="bottom-center"
    autoClose={5000}
    hideProgressBar
    newestOnTop={false}
    closeOnClick />

.toast {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

[fkhadra]

Hello @garethwarry,

The ToastContainer width is fixed to 320px by default. You could increase it via the style helper:

import { style } from "react-toastify";
style({
  width: "350px"
});

The position property of the ToastContainer is fixed so it's hard to have a dynamic width for the toast.

I think that I need to review the implementation a bit and use max-width/min-width so the toast width will expand till it reaches max width

[spiritedfang]

Thanks for the quick response! That solved the problem.

[CSFlorin]

This seems to not work anymore. Is there a new way to customize the styling?