如何将Material-UI Select组件宽度设置为最宽MenuItem的宽度

解决方案 #

方法1：纯CSS实现（优先推荐）

你当前的配置存在两个影响自适应的问题：

• FormControl设置了固定的minWidth: 213限制了容器的最小宽度，需要替换为自适应属性
• 菜单项内的文字没有禁止折行，会导致宽度计算偏差

修改后的样式如下：

formControl: {
    margin: theme.spacing(1),
    width: 'fit-content', // 替换原来的minWidth，让容器宽度自适应内容
    padding: "0",
    height: 35
},
select: {
    display: "flex",
    alignItems: "center"
},
menuItem: {
    color: "#222228",
    fontSize: "13px",
    letterSpacing: 0,
    lineHeight: "24px",
    display: "flex",
    whiteSpace: 'nowrap' // 新增：禁止菜单项文字折行，保证宽度计算正确
},
// 新增：菜单项内的文字标签禁止收缩
menuItemLabel: {
    margin: 0,
    flexShrink: 0
}

然后修改renderMenuItem内的p标签，绑定新增的类：

const renderMenuItem = (option: any) => {
    const { value: optValue, label, icon, onClick = () => { } } = option;
    return (
        <MenuItem
            key={optValue}
            className={classes.menuItem}
            value={optValue}
            onClick={onClick}
        >
            <div style={{ display: 'flex', gap: 4 }}>{icon} <p className={classes.menuItemLabel}>{label}</p></div>
        </MenuItem>
    );
}

Select组件保留autoWidth={true}即可正常自适应最长菜单项宽度。

方法2：JS动态计算宽度（适配复杂场景）

如果样式存在其他冲突无法用纯CSS实现，可以通过下拉菜单展开钩子动态获取最长菜单项宽度，同步设置给Select容器：
修改Select组件配置，添加MenuProps参数：

<FormControl className={classes.formControl}>
     <Select
         value={value}
         autoWidth={true}
         className={classes.select}
         MenuProps={{
             onEnter: (el) => {
                 // 获取下拉菜单的实际渲染宽度
                 const menuWidth = el.firstChild.clientWidth;
                 // 同步设置给Select根容器
                 el.previousSibling.style.minWidth = `${menuWidth}px`;
             }
         }}
      >
      {options.map(renderMenuItem)}
     </Select>
</FormControl>

该方法会在第一次展开下拉菜单时自动匹配宽度，后续无需重复计算。

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