Chromium中MUI Autocomplete显示两个清除按钮，如何全部隐藏？

问题背景 #

当给Autocomplete的InputProps设置type: 'search'时，Chromium系列浏览器会自动为搜索类型输入框添加原生清除按钮，叠加MUI Autocomplete自带的清除按钮后就出现了两个按钮。disableClearable仅能隐藏MUI自带的右侧按钮，无法处理浏览器原生的左侧按钮，且该问题仅在Chromium中出现，Firefox无此现象。

解决方案 #

通过CSS隐藏浏览器原生的搜索框清除按钮即可，以下是两种实现方式：

方式1：组件内直接添加样式 #

修改Autocomplete的sx属性，针对webkit内核的搜索框伪元素设置隐藏：

<Autocomplete
  disablePortal
  disableClearable
  id="combo-box-demo"
  options={supported_games}
  sx={{
    width: 300,
    '& input[type="search"]::-webkit-search-cancel-button': {
      display: 'none'
    }
  }}
  renderInput={(params) => <TextField {...params} label="Movie" InputProps={{ ...params.InputProps, type: 'search'}} />}
/>

方式2：全局样式（多组件复用场景） #

在项目全局CSS文件中添加以下规则：

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

原理说明 #

Chromium为type="search"的input元素默认渲染了清除按钮，对应CSS伪元素为::-webkit-search-cancel-button，通过设置该伪元素display: none，即可隐藏浏览器原生按钮，只保留MUI组件的交互逻辑。

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