Snackbar: transition does not work with SnackbarContent

[abraaobuenotype]

occurrence:

error:

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[mbrookes]

I suspect the issue is MySnackbarContentWrapper (but hard to say without a link to the sandbox. Is it a function component? If so, please read the page linked in the error message, it should answer your question.

[abraaobuenotype]

I just added a Slide in the sandbox of the documentation example itself

https://codesandbox.io/s/material-demo-yhmo9

[eps1lon]

children | element |   | A single child content element.⚠️ Needs to be able to hold a ref.

-- https://material-ui.com/api/slide/#props

vs. the default Grow:

children | element |   | A single child content element.

-- https://material-ui.com/api/grow/#props

Our composition guide hopefully helps you fix this issue.

[mbrookes]

So, yeah, MySnackbarContentWrapper is a function component, so like the error message says, you need to wrap it with React.forwardRef:

https://codesandbox.io/s/material-demo-qzxom

[abraaobuenotype]

Fantastic. Thank you very much

[Vang-z]

now, I have a another problem, transition does not work when the snackbar close.It's just work with init directions, if I use direction('left' || 'right' || 'up' || 'down'), It doesnt work....

[abraaobuenotype]

as @mbrookes said, it worked for me doing this: