Menu
How can I apply the ::-webkit-scrollbar pseudo elements to a component using inline styling in React?
489
Scrollbar Selectors For webkit browsers, you can use the following pseudo elements to customize the browser's scrollbar: ::-webkit-scrollbar the scrollbar. ::-webkit-scrollbar-button the buttons on the scrollbar (arrows pointing upwards and downwards). ::-webkit-scrollbar-thumb the draggable scrolling handle.
Setting Inline Styles in a React ComponentSpecify the style object inside the constructor as follows. Notice here that the text-align CSS property got camel-cased to textAlign . Pass this styles object to the <H1 /> component, as shown below. Combine multiple style objects using the spread operator.
Rule of Thumb. The official React documentation frowns upon the use of inline styling as a primary means of styling projects and recommends the use of the className attribute instead.
This worked in my project '&::-webkit-scrollbar': { width: 0, }
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
