我可以为自动完成列表框 Mui 提供自定义滚动条样式吗？

Question

我需要在自动完成列表框中给出自定义滚动样式。

我尝试并研究了它，但没有一个起作用。

我最后的代码

    <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",
                    },
                  },
                }}

Answer 1

是的，您可以将自定义

className

传递给

ListboxProps

组件的

Autocomplete

，如下所示：

ListboxProps={{
    className: "myCustomList"
  }}

然后将滚动条相关的CSS添加到此类中，如下所示：

.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;
}

您可以查看此沙箱，了解此解决方案的实时工作示例。

Answer 2

而不是在 style 属性中添加样式；在 ListBoxProps 中添加 'sx' 属性中的样式。这对我有用。

 ListboxProps={{
          sx: {
            maxHeight: 300, // Adjust this value as per your requirement
            '&::-webkit-scrollbar': {
              width: '8px'
            },
            '&::-webkit-scrollbar-track': {
              backgroundColor: theme.palette.background.default
            },
            '&::-webkit-scrollbar-thumb': {
              backgroundColor: theme.palette.primary.main,
              borderRadius: '10px',
              border: `2px solid ${theme.palette.background.paper}`
            },
            '&::-webkit-scrollbar-thumb:hover': {
              backgroundColor: theme.palette.primary.dark
            }
          }
        }}