webkit-scrollbar Style not getting applied

C Sharper 0
Viewed 46

I have created wrapper for styled scrollbar in react js -

import styled from '@emotion/styled';
export const ScrollbarWrapper = styled.div(() => ({
  maxHeight: '65vh',
  overflowY: 'auto',

  '*::-webkit-scrollbar': {
    width: '0.5rem',
  },
  '*::-webkit-scrollbar-track': {
    '-webkit-box-shadow': 'inset 0 0 0.37rem rgba(0,0,0,0.00)',
  },
  '*::-webkit-scrollbar-thumb': {
    backgroundColor: '#d8d8d8',
    borderRadius: '0.28rem',
  },
}));

I have implemented it as-

 <ScrollbarWrapper>
      some content...
      ....
 <ScrollbarWrapper>

Stackbiz - https://stackblitz.com/edit/react-sxa5xd?file=src%2FApp.js,src%2Fstyle.ts

But I can see there is no styling particularyle in regards to -webkit-scrollbar

I can see maxheight and overflow auto has got applied.

How can I implement srollbar style also in reactjs?

jquery reactjs javascript css html
1 Answers

Removing * from webkit worked for me.

I made css as -

import styled from '@emotion/styled';
export const ScrollbarWrapper = styled.div(() => ({
  maxHeight: '65vh',
  overflowY: 'auto',

  '::-webkit-scrollbar': {
    width: '0.5rem',
  },
  '::-webkit-scrollbar-track': {
    '-webkit-box-shadow': 'inset 0 0 0.37rem rgba(0,0,0,0.00)',
  },
  '::-webkit-scrollbar-thumb': {
    backgroundColor: '#d8d8d8',
    borderRadius: '0.28rem',
  },
}));

removing * before ::

C Sharper0
Related