Ask Question

How can I style browser scrollbar in Ckakra-UI

I want to customise the browser scrollbar like described here.
I need to apply for example ::-webkit-scrollbar pseudo element on <Box> component… How can I achieve that?

ReactchakraCSS

15526 views

Author´s AnkiCodes image

AnkiCodes

Last edited on

2 Answers

Best answer

You can use the sx property - like this

<Box
  ...
  sx={{
    '&::-webkit-scrollbar': {
      width: '16px',
      borderRadius: '8px',
      backgroundColor: `rgba(0, 0, 0, 0.05)`,
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: `rgba(0, 0, 0, 0.05)`,
    },
  }}
>