如何让Antd Select组件的下拉列表向下延伸至底部？

直接设置dropdownStyle={{ height: '40vh' }}不生效的原因是，Antd Select的下拉容器内部还有一层菜单容器，默认样式会限制高度，只单独设置height无法覆盖默认逻辑。试试下面两种方案：

方案一：在dropdownStyle中添加滚动属性 #

给dropdownStyle同时设置height和overflow，让超出部分自动滚动，就能实现下拉框向下延伸的效果：

<Select
  className="brandInput"
  value={brand}
  defaultValue={"Business Sector"}
  size="large"
  dropdownStyle={{ 
    height: '40vh',
    overflow: 'auto'
  }}
  onChange={changeBrand}
>
  {sortedBrandList.map((brand) => (
    <Option key={brand.code} value={brand.code}>
      {brand.label}
    </Option>
  ))}
</Select>

方案二：通过自定义类名强制覆盖样式 #

如果方案一没效果，就用自定义类名brandInput来直接修改下拉菜单的样式：

.brandInput .ant-select-dropdown-menu {
  max-height: 40vh;
  height: auto;
}

这样能直接针对下拉列表的核心容器设置高度，确保样式生效。

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