Can I give a custom scrollbar style to Autocomplete Listbox Mui?

Rahil Ali 0
Viewed 27

I need to give a custom scroll style in Autocomplete Listbox.

enter image description here

I tried and research it and none of them worked.

My last codes

    <Autocomplete
                fullWidth
                popupIcon={<KeyboardArrowDownIcon />}
                id="combo-box-demo"
                options={allTableData}
                noOptionsText={"Məhsul tapılmadı"}
                getOptionLabel={(option) => option.name ?? option}
                ListboxProps={{
                  style: {
                    maxHeight: "200px",
                    "&::-webkit-scrollbar": {
                      width: "20px",
                    },
                  },
                }}
scroll material-ui css
1 Answers

Yes, you can pass a custom className to ListboxProps of Autocomplete component like this:

ListboxProps={{
    className: "myCustomList"
  }}

And then add scrollbar-related CSS to this class like this:

.myCustomList::-webkit-scrollbar {
  width: 12px;
  background-color: #5f6f9c;
}

.myCustomList::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d62929;
}

You can take a look at this sandbox for a live working example of this solution.

Ahmet Emre Kılınç0
Related