Today I wanted to hide scrollbars using CSS on my styled component. I added this directive to my styled component that renders when passing the prop hideScrollBar to it

const Container = styled.div`
   ${({ hideScrollBar }) => (hideScrollBar
    ? `
        -ms-overflow-style: none;
        scrollbar-width: none;
        &::-webkit-scrollbar {
          display: none;
        }
    `
    : '')}
`;

The first directive -ms-overflow-style work for IE and Edge. The second scrollbar-width with Firefox and the other for the rest of the browsers.

Resources:

https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp