How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)

Question

I'm working with Chakra UI and i needed to customize the scrollbar style using the css pseudo element ::-webkit-scrollbar, but Chakra UI doesn't seen to have this pseudo element and a I don't know where I can style this specific component without creating a global css class.

Here is a sample of my code:

<Box
  overflowX="auto"
  maxW="100vw"
  h="100%"
  whiteSpace="nowrap"
  pb="17px"
  color="white"
  px="32px"
  // the ::-webkit-scrollbar property should goes here
>
  <!-- content -->
</Box>

nbsp · Accepted Answer · 2021-01-02T02:11:14.797

6

Try css prop:

<Box
  overflowY="auto"
  css={{
    '&::-webkit-scrollbar': {
      width: '4px',
    },
    '&::-webkit-scrollbar-track': {
      width: '6px',
    },
    '&::-webkit-scrollbar-thumb': {
      background: scrollbarColor,
      borderRadius: '24px',
    },
  }}
>

edited Jan 02 '21 at 02:11

answered Jan 02 '21 at 02:02

nbsp

118
6

Do you know how to add `::-webkit-scrollbar-thumb:horizontal`, cannot figure out what rules chakra is using internally for pseudo css. – Yunhai Mar 09 '21 at 05:05

score -1 · Answer 2 · answered Dec 09 '20 at 15:51

I'm not sure if this will work but I've customize a Link like this.

import {
 
  Link,
  
} from "@chakra-ui/core";

 <Link key={link} 
       style={{ textDecoration: 'none' }} 
       mr={6} 
       href={link} 
       size="16px">
       {title}
 </Link>

How to add ::-webkit-scrollbar pseudo element in Chakra UI element? (React)

2 Answers2