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-02 02:11:14Z

34

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 2, 2021 at 2:11

answered Jan 2, 2021 at 2:02

nbsp

4184 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yunhai Over a year ago

Do you know how to add ::-webkit-scrollbar-thumb:horizontal, cannot figure out what rules chakra is using internally for pseudo css.

redixhumayun Over a year ago

This doesn't seem to work anymore.

Dassy Over a year ago

Not sure if you still need this @Yunhai but for horizontal scroll bar you need to specify the height instead of the width.

Abir · Accepted Answer · 2022-06-24 16:23:49Z

8

Use Chakra sx prop here.

<Box
  overflowX="auto"
  maxW="100vw"
  h="100%"
  whiteSpace="nowrap"
  pb="17px"
  color="white"
  px="32px"
  sx={
     { 
    '::-webkit-scrollbar':{
           display:'none'
       }
    }
  }
>
  <!-- content -->
</Box>

To know more about Chakra sx prop, refer docs

answered Jun 24, 2022 at 16:23

Abir

3595 silver badges6 bronze badges

Comments

Ateeb Asif · Accepted Answer · 2022-08-30 10:05:46Z

2

It worked for me you can use overflow="scroll" and with this the prop sx={}

<Flex
    mt="20px"
    overflow="scroll"
    sx={{
      "::-webkit-scrollbar": {
        display: "none",
      },
    }}
  />

answered Aug 30, 2022 at 10:05

Ateeb Asif

1943 bronze badges

Comments

malek · Accepted Answer · 2022-06-15 14:14:16Z

1

its not gonna work with just css you need to __css

<Box
  overflowY="auto"
  __css={{
        '&::-webkit-scrollbar': {
          w: '2',
        },
        '&::-webkit-scrollbar-track': {
          w: '6',
        },
        '&::-webkit-scrollbar-thumb': {
          borderRadius: '10',
          bg: `gray.100`,
        },
      }}
>

answered Jun 15, 2022 at 14:14

malek

92 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related