如何为MUI Autocomplete Listbox设置自定义滚动条样式？

你当前代码的问题在于React内联样式（style属性）不支持CSS伪元素/嵌套选择器，所以&::-webkit-scrollbar这种写法在style里不会生效。下面给几种可行的解决办法：

方法一：使用CSS类名（推荐，适用于所有MUI版本） #

给Listbox添加自定义类名，然后在全局CSS或CSS模块中编写滚动条样式：

组件代码：

<Autocomplete
  fullWidth
  popupIcon={<KeyboardArrowDownIcon />}
  id="combo-box-demo"
  options={allTableData}
  noOptionsText="Məhsul tapılmadı"
  getOptionLabel={(option) => option.name ?? option}
  ListboxProps={{
    className: "custom-autocomplete-listbox",
    style: { maxHeight: "200px" }
  }}
/>

CSS代码：

.custom-autocomplete-listbox {
  max-height: 200px;
  overflow-y: auto;
}

/* 自定义滚动条宽度 */
.custom-autocomplete-listbox::-webkit-scrollbar {
  width: 20px;
}

/* 可选：自定义滚动条轨道样式 */
.custom-autocomplete-listbox::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 8px;
}

/* 可选：自定义滚动条滑块样式 */
.custom-autocomplete-listbox::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
}

.custom-autocomplete-listbox::-webkit-scrollbar-thumb:hover {
  background: #555;
}

方法二：使用MUI v5+的sx属性 #

MUI的sx属性支持嵌套CSS选择器，可以直接在sx中编写滚动条样式，替换原来的style：

<Autocomplete
  fullWidth
  popupIcon={<KeyboardArrowDownIcon />}
  id="combo-box-demo"
  options={allTableData}
  noOptionsText="Məhsul tapılmadı"
  getOptionLabel={(option) => option.name ?? option}
  ListboxProps={{
    sx: {
      maxHeight: "200px",
      "&::-webkit-scrollbar": {
        width: "20px"
      },
      /* 可选：添加轨道和滑块样式 */
      "&::-webkit-scrollbar-track": {
        background: "#f1f1f1",
        borderRadius: "8px"
      },
      "&::-webkit-scrollbar-thumb": {
        background: "#888",
        borderRadius: "8px"
      }
    }
  }}
/>

方法三：MUI v4使用makeStyles #

如果使用的是MUI v4，用makeStyles创建样式钩子：

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  listbox: {
    maxHeight: "200px",
    "&::-webkit-scrollbar": {
      width: "20px"
    },
    // 可选的滚动条其他样式
    "&::-webkit-scrollbar-track": {
      background: "#f1f1f1"
    },
    "&::-webkit-scrollbar-thumb": {
      background: "#888"
    }
  }
});

// 组件内使用
const classes = useStyles();

<Autocomplete
  fullWidth
  popupIcon={<KeyboardArrowDownIcon />}
  id="combo-box-demo"
  options={allTableData}
  noOptionsText="Məhsul tapılmadı"
  getOptionLabel={(option) => option.name ?? option}
  ListboxProps={{
    className: classes.listbox
  }}
/>

内容的提问来源于stack exchange，提问作者Rahil Ali