始终在自动完成上显示 "X" 以删除内容

Question

我试图始终在 MUI 自动完成中显示“x”，而不是仅在悬停时显示它。

我的意思是： https://codesandbox.io/s/combobox-material-demo-forked-obbuu9

当您将鼠标悬停在下拉菜单上时，会出现 X，这将删除下拉菜单的内容。

有什么办法可以一直保持那个 X 吗？

Answer 1

以下是您可以做的事 Css:

export default function ComboBox() {
  return (
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={top100Films}
      value={top100Films[0]}
      sx={{
        width: 300,
        "& button[title='Clear']": {
          visibility: "visible"
        }
      }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />
  );
}

这是codesandbox中的演示：https://codesandbox.io/s/combobox-material-demo-forked-7u1noe?file=/demo.js:137-511

Answer 2

只需将 The sx prop 更改为：

sx={{
    width: 300,        
    "& button.MuiButtonBase-root" : {
      visibility: "visible"
    }
  }}

始终在自动完成上显示 "X" 以删除内容

Always show "X" on Autocomplete to delete content

reactjs

material-ui

react-material