如何将InputBase与多选Autocomplete搭配使用？解决MUI DataGrid样式问题

问题描述 #

在MUI DataGrid的编辑模式中使用Autocomplete组件时，TextField会渲染多余边框；改用InputBase替代TextField后，输入框可正常显示，但选中项的芯片逻辑失效。需要找到既能复用TextField全部逻辑，又避免其外层MuiFormControl包裹元素的方法，或直接解决边框冗余问题。

当前代码：

<Autocomplete
  multiple
  freeSolo
  value={value || []}
  onChange={(event, newValue) => {
    api.setEditCellValue({ id, field, value: newValue }, event);
  }}
  options={['aaa', 'bbb']}
  renderInput={(params) => <TextField {...params} />}
  fullWidth
/>

解决方案 #

方案1：修改TextField样式去除多余边框 #

通过disableUnderline属性关闭TextField的下划线，并自定义CSS移除外层FormControl的边框和阴影，同时保留TextField的所有逻辑（包括芯片渲染）：

<Autocomplete
  multiple
  freeSolo
  value={value || []}
  onChange={(event, newValue) => {
    api.setEditCellValue({ id, field, value: newValue }, event);
  }}
  options={['aaa', 'bbb']}
  renderInput={(params) => (
    <TextField
      {...params}
      disableUnderline
      sx={{
        '& .MuiFormControl-root': {
          border: 'none',
          boxShadow: 'none',
          outline: 'none',
        },
      }}
    />
  )}
  fullWidth
/>

方案2：直接使用Input组件替代TextField #

Input组件是TextField的底层输入组件，不包含外层FormControl，同时可以通过startAdornment接收Autocomplete生成的芯片组，完美保留芯片逻辑：

import Input from '@mui/material/Input';

<Autocomplete
  multiple
  freeSolo
  value={value || []}
  onChange={(event, newValue) => {
    api.setEditCellValue({ id, field, value: newValue }, event);
  }}
  options={['aaa', 'bbb']}
  renderInput={(params) => (
    <Input
      {...params.inputProps}
      startAdornment={params.startAdornment}
      fullWidth
      placeholder="输入或选择选项"
    />
  )}
  fullWidth
/>

说明 #

• 方案1适合需要保留TextField的其他特性（如标签、验证状态等）的场景，仅移除冗余边框。
• 方案2更轻量化，直接使用底层Input组件，彻底避免FormControl的影响，同时完整保留Autocomplete的芯片渲染逻辑。

内容的提问来源于stack exchange，提问作者Thomas Ramé