I can not control z-index of <Sheet>

[AK1118]

No description provided.

[Temzasse]

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]

@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]

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]

Changing the z-index using the following example worked for me: #144 (comment)