stipsan / react-spring-bottom-sheet

Accessible ♿️, Delightful ✨, & Fast 🚀
https://react-spring.bottom-sheet.dev/
MIT License
946 stars 129 forks source link

Allow setting an z-Index #258

Open CrysisDeu opened 1 year ago

CrysisDeu commented 1 year ago

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

Yeroshenko commented 1 year ago

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;
    }
`;
rein96 commented 1 year ago

Up

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

AshRing commented 11 months ago

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

nikolay-bennie commented 9 months ago

same issue here

donguk87 commented 4 months ago

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