如何使用antd Select组件实现固定宽度下所有选项单行展示

实现思路 #

• 覆盖antd下拉菜单默认的垂直块级布局，改为flex横向排列，设置不换行规则
• 取消单个Option的默认100%宽度，设置为内容自适应且不收缩
• 固定容器宽度下超出时可开启横向滚动，保证选项展示完整

代码实现 #

1. 组件代码修改 #

给Select添加dropdownClassName属性给下拉容器绑定专属类名，避免全局样式污染，同时调整dropdownStyle设置固定容器宽度：

<Select
  className="select-color"
  dropdownClassName="horizontal-select-dropdown"
  dropdownStyle={{ width: "300px" }} // 此处填写你需要的固定容器宽度
  onChange={this.handleChange}>
  <Option value="blue" className="blue-color">
    <div style={{backgroundColor: "pink", color:"#fff", width:20, height:20, borderRadius: 5}} />
  </Option>
  <Option value="green">green</Option>
  <Option value="aqua">aqua</Option>
</Select>

2. 样式覆盖 #

添加对应CSS规则修改下拉菜单布局：

/* 下拉菜单列表容器 */
.horizontal-select-dropdown .ant-select-dropdown-menu {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 0;
}
/* 单个下拉选项 */
.horizontal-select-dropdown .ant-select-dropdown-menu-item {
  flex-shrink: 0;
  width: auto;
  min-width: fit-content;
  padding: 5px 12px;
}

注意事项 #

• 如果项目中使用了scoped样式、CSS Module等样式隔离方案，需要添加深度选择器（如Vue的:deep()、React less的:global()包裹）才能命中下拉菜单的样式，因为Select的下拉容器默认是挂载到body根节点下，不在组件的DOM树内部。

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