How can I modify the scrollbar with ReactJS + Chakra UI?

Question

I'm trying to modify the style of my scrollbar but I can't get it.

I have tried with the parameters: css, __css and sx.

Example:

             __css={{
                '&::-webkit-scrollbar': {
                    width: '2px',
                },
                '&::-webkit-scrollbar-track': {
                    boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
                    webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
                    width: '2px',
                },
                '&::-webkit-scrollbar-thumb': {
                    backgroundColor: 'rgba(0,0,0,.1)',
                    outline: '1px solid slategrey',
                    borderRadius: '24px',
                },
            }}

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

score 0 · Accepted Answer · answered Feb 08 '23 at 19:09

0

Best way I use for basic customization, put the following code inside a .css or .scss or .sass file:

* {
  scrollbar-width: thin;
  scrollbar-color: transparent var(--primary);
}

*::-webkit-scrollbar {
  width: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--primary);
  border-radius: 0;
  border: none;
}

You can check for more options at https://css-tricks.com/almanac/properties/s/scrollbar/

answered Feb 08 '23 at 19:09

Aahan Agarwal

391
2
6

EDIT: Working only with Chrome, not Firefox. – JSanchezFDZ Feb 08 '23 at 21:18
The `webkit` style selector is for firefox, did you style them as well? – Aahan Agarwal Feb 08 '23 at 21:26
Yes but dont work – JSanchezFDZ Feb 11 '23 at 17:03
@JSanchezFDZ I think Firefox does not support inline CSS, can you try putting this in a CSS file? – Aahan Agarwal Feb 11 '23 at 17:05
Yes, but dont work. Thank your for your time! – JSanchezFDZ Feb 12 '23 at 18:27
First, a correction: `webkit` selector is for Chrome based browsers. Second: `scrollbar-width` and `scrollbar-color` are the properties supported by firefox. Add `!important` flag for both the properties and use both `*, html` selectors then try this – Aahan Agarwal Feb 13 '23 at 16:41

How can I modify the scrollbar with ReactJS + Chakra UI?

1 Answers1