MUI DataGrid内嵌CustomAutocomplete组件宽度异常问题求助

问题原因 #

你遇到的问题根源在于：disablePortal属性让Autocomplete的菜单渲染在DataGrid单元格内部，而单元格默认带有overflow: hidden样式，导致长文本选项被截断；同时固定宽度的输入框也限制了菜单的自适应空间，最终出现显示异常。

解决方案 #

1. 移除disablePortal属性
   去掉Autocomplete组件中的disablePortal，让菜单渲染到body层级，脱离单元格的容器约束，避免被单元格的样式限制。

2. 配置菜单自适应内容
   通过PopperProps设置菜单样式，使其能根据文本长度自动调整宽度，同时允许长文本换行显示，保证内容完整。

3. 解除单元格溢出限制
   在DataGrid的列配置中给对应单元格添加样式，允许内容溢出可见，防止菜单被单元格容器遮挡。

修改后的代码示例 #

CustomAutocomplete组件修改：

export default function CustomAutocomplete(props){
//..
return(
    <Autocomplete
                size="small"
                id="values-id"
                options={values.map(a => a[props?.keySearch])}
                sx={props?.sx}
                value={value}
                onChange={handleOnChange}
                // 移除disablePortal，添加PopperProps配置菜单样式
                PopperProps={{
                  sx: {
                    '& .MuiAutocomplete-popper': {
                      width: 'auto',
                      minWidth: '100%' // 保持菜单最小宽度与输入框一致
                    },
                    '& .MuiAutocomplete-option': {
                      whiteSpace: 'normal', // 允许长文本换行
                      wordBreak: 'break-word'
                    }
                  }
                }}
                renderInput={(params) => <TextField {...params} label={props?.label}/>}
            />
)}

DataGrid列配置修改：

const userColumns = [
    { 
      field: 'title', headerName: 'TITLE', flex:1
    },
    { 
      field: 'services', headerName: 'SERVICES', flex:1, 
      sx: { overflow: 'visible' }, // 解除单元格的溢出隐藏限制
      renderCell: (params) => (
          <CustomAutocomplete
                title="services"
                keySearch="libelle"
                items={params.row.services}
                sx={{width:  180}}
           />
          ),
    },
//other columns
]

修改完成后，Autocomplete的菜单会在body层级渲染，不受单元格样式约束，长文本也能正常换行或自适应宽度显示。

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