I can not control z-index of <Sheet>

Temzasse commented 1 month 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 1 month 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 1 month 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;
}

khashashin commented 1 week ago

Changing the z-index using the following example worked for me: https://github.com/Temzasse/react-modal-sheet/issues/144#issuecomment-1807431040

Temzasse / react-modal-sheet

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