search

Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
842 stars 80 forks source link

I can not control z-index of <Sheet> #173

Open AK1118 opened 5 days ago

Temzasse commented 3 days ago

Hey @AK1118 👋🏻

Could you describe the use case a bit more? Do you want to control the z-index of the wrapper div of the sheet which currently just uses a hard coded z-index value of 9999999 when sheet is open and -1 when it is closed?

yunjin-kim commented 2 days ago

@Temzasse

Do you want to control the z-index of the wrapper div of the sheet which currently just uses a hard coded z-index value of 9999999 when sheet is open and -1 when it is closed?

Yes~!

AK1118 commented 2 days ago

I've been trying to rewrite the stylesheet for that other component class in index.css, and it worked. If you add a control method ,It would be even better.

index.css

.react-modal-sheet-container {
  /* custom styles */
  z-index: 2 !important;
}
.react-modal-sheet-backdrop {
  /* custom styles */
  z-index: 1 !important;
}
.react-modal-sheet-header {
  /* custom styles */
}
.react-modal-sheet-drag-indicator {
  /* custom styles */
}
.react-modal-sheet-content {
  /* custom styles */
}
.PhotoView-Portal{
  z-index:999999999 !important;
}
.Toastify__toast-container{
  z-index:999999999 !important;
}