Javascript 如何使列表的第一项始终位于顶部，列表的其余部分将独立于它滚动

是否可以将列表的第一项置于列表顶部，而不与其他项一起滚动

     <Select
            open={open}
            value={value}
            onChange={this.handleSelectChange}
            onClose={this.handleSelectClose}
            onOpen={this.handleSelectOpen}
          >
            <MenuItem
              style={{
                backgroundColor: "transparent"
              }}
            >
              <TextField
                value={search}
                fullWidth
                placeholder="search"
                onChange={this.handleInputChange}
              />
            </MenuItem>
            {filteredOptions.length ? (
              filteredOptions.map(option => {
                return (
                  <MenuItem value={option} key={option.value}>
                    {option.label}
                  </MenuItem>
                );
              })
            ) : (
              <MenuItem disabled>No match</MenuItem>
            )}
     </Select>

{filteredOptions.length(
filteredOptions.map（选项=>{
返回(
{option.label}
);
})
) : (
没有对手
)}

---

从用户体验的角度来看，它可能看起来像是一个自动完成，我不会将搜索字段放在列表中。。。为什么不直接使用Material UI的自动完成组件？在这种情况下，一旦用户开始键入，就会有一个普通文本字段打开相应的列表。 有关如何使用它的示例，请参见

---

如果您想要更复杂的选择组件，我可以推荐React select（）。但是如果你想让它与材质的外观和感觉相匹配，你必须自己设计它的样式…

链接不起作用，我看不到你的例子。但是，以下是这种情况下所需的样式示例：

Select
position: relative // necessary
height: 123px // optional
overflow-y: scroll // optional

MenuItem // first one only
position: absolute // necessary
top: 0px // optional
z-index:10 // optional
background-color: white // optional

---

链接不工作。我猜这是指私人回购。