如何在 Material-UI 中禁用下划线而不删除自动完成中的选择？

【问题标题】：How can I disable underline in Material-UI without removing the selection in Autocomplete?如何在 Material-UI 中禁用下划线而不删除自动完成中的选择？
【发布时间】：2021-07-12 12:33:48
【问题描述】：

我想用不带下划线的TextField 组件创建Autocomplete。我在TextField 道具中使用InputProps={{ disableUnderline: true }} 禁用了下划线，它完成了它的工作，但它也删除了选择栏，所以问题是，如何在不删除选择栏的情况下完成此操作？

【问题讨论】：

标签： javascript css reactjs material-ui underline

【解决方案1】：

要再次启用下拉列表，您还需要在嵌套属性中传播所有提供的道具 (InputProps)。所以替换这一行

<TextField {...params} InputProps={{ disableUnderline: true }} />

与：

<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />

完整的工作代码：

<Autocomplete
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderInput={(params) => (
    <TextField
      {...params}
      InputProps={{ ...params.InputProps, disableUnderline: true }}
      label="Combo box"
    />
  )}
/>

现场演示

【讨论】：