Material UI Select下拉菜单内容过长，如何添加水平滚动条？

针对下拉菜单内容过长无法完整显示的问题，直接添加OverflowX不生效是因为组件默认样式限制了容器宽度，以下是几种可行的解决方案：

方案一：开启横向滚动显示完整内容 #

通过menuProps的sx属性，针对下拉菜单容器和列表项设置样式，解除宽度限制并开启横向滚动：

<Select
  // 你的其他组件属性
  menuProps={{
    sx: {
      '& .MuiMenu-paper': {
        maxWidth: 'unset', // 移除默认最大宽度限制
        overflowX: 'auto', // 开启横向滚动
      },
      '& .MuiListItem-root': {
        whiteSpace: 'nowrap', // 强制文本不换行
      }
    }
  }}
>
  {/* 下拉选项内容 */}
</Select>

方案二：让下拉菜单自适应内容宽度 #

如果不想用滚动，可设置菜单容器宽度自动匹配最长选项的内容长度：

<Select
  // 你的其他组件属性
  menuProps={{
    sx: {
      '& .MuiMenu-paper': {
        width: 'fit-content',
        minWidth: '100%', // 保证菜单宽度不小于Select组件本身
      }
    }
  }}
>
  {/* 下拉选项内容 */}
</Select>

方案三：允许文本换行适配容器 #

若允许文本换行，可调整列表项的文本换行规则：

<Select
  // 你的其他组件属性
  menuProps={{
    sx: {
      '& .MuiListItem-root': {
        whiteSpace: 'normal', // 允许文本自动换行
        wordBreak: 'break-word', // 长单词拆分换行
      }
    }
  }}
>
  {/* 下拉选项内容 */}
</Select>

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