-
Notifications
You must be signed in to change notification settings - Fork 21
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Issues with z-index when used with Drawer component Material UI #2
Comments
@yugalkishoregoyal yeah, sometimes these z-index issues are hard to deal, mainly when it involves another libraries. Have you tried using the Material UI Snackbar instead of the React Simple Snackbar? It could be better to integrate Material UI's own components instead of another libs in your project. Moreover, this component was created based on Material UI's snackbar, so they are very similar. |
@evandromacedo How about adding a dummy classname to https://github.com/evandromacedo/react-simple-snackbar/blob/master/src/Snackbar.js#L95 so global styling can set the z-index of the container? I realize that it is a hack but I also think that snackbar z-index isn't something that we often style on a per component/usage basis. Right now, I have to use this to get it to work, div[class^="Snackbar_snackbar-wrapper"] {
z-index: 1100;
} This is not a very good solution because CSS minify or some other kind of transformation could break it. |
This is just what I needed to get something working, thank you. |
Thanks! This fixed my issue as well... A simple class name on the wrapper would solve the issue. |
Snackbar is shown behind the Drawer and is visible on dismissing it, is there any way to set the z-z-index priority, I tried using, but it didn't help.
const options = { zIndex: '10000 !important', } .... const [openSnackbar, closeSnackbar] = useSnackbar(options)
Any suggestions would be great!
The text was updated successfully, but these errors were encountered: