Material UI Autocomplete如何在下拉列表底部添加不可选图片

MUI Autocomplete原生支持对下拉列表容器、弹层容器做自定义渲染，完全可以实现列表底部追加「powered by google」标识、且标识不被识别为可选项的需求，不需要硬改单个选项逻辑绕路，常用实现有两种：

• 方式1：通过ListboxComponent属性自定义滚动列表容器
  该属性支持传入自定义组件替换默认承载选项的列表容器，你只需要在渲染完所有原有选项节点后，追加自己的标识节点即可。由于追加的节点不在组件的options配置数组范围内，不会触发选中逻辑，也不会被键盘导航聚焦。
  核心实现代码参考：

  import Autocomplete from '@mui/material/Autocomplete';
  import List from '@mui/material/List';
  
  // 自定义列表容器
  const CustomOptionList = (props) => {
    const { children, ...listProps } = props;
    return (
      <List {...listProps}>
        {children}
        {/* 底部归属标识 */}
        <div style={{ padding: 8, borderTop: '1px solid #e0e0e0' }}>
          <img src="你的powered by google图片本地路径" alt="powered by google" />
        </div>
      </List>
    );
  };
  
  // 使用组件时传入配置
  <Autocomplete
    ListboxComponent={CustomOptionList}
    // 其余原有配置：options、renderInput、renderOption、onChange等
  />
  

  这种方式追加的标识会在选项滚动区域内，选项过多滚动时标识会随列表滚动到最底部才显示。
• 方式2：通过PaperComponent属性自定义弹层外层容器
  如果你需要把标识固定在下拉弹层底部、不随选项滚动，就用该属性替换默认的弹层纸张容器，把原有的选项列表和底部标识作为并列子节点渲染即可，同样不会被识别为可选项。

注意：不要通过往options数组末尾塞入占位项、再用renderOption渲染标识的方式实现。这种方案下占位项会被组件识别为合法选项，哪怕加了禁用样式，键盘导航时仍会聚焦到该项，不符合使用规范。

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