How to set the width of the scrollbar?

[Nickk4]

I have a react-infinite-scroll-component in combination with react-custom-scrollbars. The code below works for me. However, I would like to set a different width for the scrollbar. Is this possible? I've tried using webkit-scrollbar in CSS, but this doesn't seem to do anything.

import InfiniteScroll from "react-infinite-scroll-component";
import ScrollingContainer from "../../../components/ScrollingContainer/";

<div
    id="scrollabl"
    style={{
        height: "calc(90vh - 200px)",
        //"scrollbar-width": "111px", Doesn't work
        //scrollbarWidth: "111px", Doesn't work
    }}
>
    <ScrollingContainer
        onScroll={this.loadItems}
    >
        <InfiniteScroll
            scrollableTarget="scrollabl"
            dataLength={
                this.state.users.length
            }
            next={this.loadItems}
            hasMore={this.state.hasMoreItems}
            endMessage={<p>No more</p>}
            loader={
                this.state.paginateLoading ? (
                    <p>Loading...</p>
                ) : (
                    ""
                )
            }
        >
            etc.

ScrollingContainer component:

import { Scrollbars } from "react-custom-scrollbars";

...

render() {
	return (
		<Scrollbars
			id="gooo"
			autoHide={this.props.hide}
			hideTracksWhenNotNeeded
			onScrollFrame={this.props.onScroll}
			universal
			ref={(node) => (this.node = node)}
		>
			{this.props.children}
		</Scrollbars>
	);
}

And in CSS:

#scrollabl {
    .infinite-scroll-component {
        overflow: hidden !important;
        padding-right: 30px;
    }
    // I've tried the following, but this doesn't seem to do anything:
    .infinite-scroll-component::-webkit-scrollbar {
        width: 100px!important;
    }
}

[anandhansreekumar]

This is working for me:

CSS:

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 10px;
}

.scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #ccc;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #999;
}

JS:

import styles from './styles.module.css';

 <InfiniteScroll
        height="52vh"
        className={clsx(
          'grid grid-cols-[repeat(auto-fill,_minmax(150px,_1fr))] gap-4 pb-[10px] pr-[10px]',
          styles.scrollbar
        )}>
</InfiniteScroll>