Customize `::-webkit-scrollbar` inline with React

Question

How can I apply the ::-webkit-scrollbar pseudo elements to a component using inline styling in React?

One cannot write `pesudo` selectors as `inline` styles.. – Panther Nov 17 '17 at 08:25 — Panther, Nov 17 '17 at 08:25

score 14 · Accepted Answer · edited Sep 18 '18 at 13:44

14

You can't write pseudo selector inline, you need to add it in css. Refer this link

edited Sep 18 '18 at 13:44

Martin54

answered Nov 17 '17 at 09:43

satyajit rout

2

According to the answer of @Elena this is not correct – mstrewe Jan 11 '23 at 09:42
3

"Page not found" When visiting this 'link' – Yuniac Jun 14 '23 at 08:36

Elena · Answer 2 · 2021-09-21T07:29:22.163

14

This worked in my project '&::-webkit-scrollbar': { width: 0, }

edited Sep 21 '21 at 07:29

answered Aug 06 '21 at 08:02

Elena

3

Welcome to SO. Please take time to explain your answers rather than just post code. When answering an older question with other, accepted answers, also explain how your answer is different or an improvement/update on the others. – rmlockerd Aug 06 '21 at 22:13
seems that it doesn't work in pure React – Pavel Shepelenko Feb 10 '23 at 14:41

score 1 · Answer 3 · answered Sep 11 '22 at 20:39

1

React suggests this

<div style={{ '&::WebkitScrollbar': { width: 0, height: 0 } }}></div>

answered Sep 11 '22 at 20:39

Francesco Orsi

not sure why I received a negative vote, that is what React suggests on console when I try to add "webkit-scrollbar", and it works – Francesco Orsi Sep 19 '22 at 15:32
Could you please add a link to a source – Pavel Shepelenko Feb 10 '23 at 14:21

3 Answers3