Use of --toastContainerBottom in custom classes

[taylorjackson]

I am trying to be able to place the toast message at varying distances from the bottom of the screen depending on the context of the toast.

I have tried adding "--toastContainerBottom": "Xrem" in a custom theme prop passed to push. Since version 0.7, I have also tried passing this preference through a class. In both cases only the --toastContainerBottom in a :root element is used (if it exists). Is it supported to be able to modify the distance from the bottom on a per notification basis?

Thanks!

[zerodevx]

Unfortunately `--toastContainer*` CSS vars can't be applied on a per-toast basis (the docs should be clearer on that). Will setting `--toastMargin` instead fit your use case? Alternatively you can create multiple container targets (with different `bottom` settings) send toasts to them based on your context.

[taylorjackson]

Thanks for the quick response! Margin doesn't work for us as then all subsequent toasts have the same bottom gap. I will set up the container targets as this will solve the problem!

[zerodevx]

Marking this as resolved. Feel free to reopen if there are further issues.