stipsan/react-spring-bottom-sheet

Allow setting an z-Index

CrysisDeu opened this issue · 5 comments

CrysisDeu commented

The webpages sometimes will have z-index > 3. Can we get an option to set the zIndex of the bottom sheet please

Yeroshenko commented

I use styled components

const StyledBottomSheet = styled(BottomSheet)`
    --rsbs-backdrop-bg: ${({ theme }) => theme.body.colors.sparePrimary(0.5)};
    --rsbs-bg: ${({ theme }) => theme.body.colors.base()};
    --rsbs-overlay-rounded: ${({ theme }) => theme.decorations.borderRadius.base}px;

    & [data-rsbs-overlay],
    [data-rsbs-backdrop] {
        z-index: 9999;
    }

    &::after {
        z-index: 9999;
    }
`;
  • 👍1
rein96 commented

Up

In my case:
The overlay is not blocking the content, the content below still can be clicked

AshRing commented

Experiencing the same. I can click elements through the backdrop.

nikolay-bennie commented

same issue here

donguk87 commented

I'm experiencing the same issue. I hope options will be added soon.