如何限制Chakra UI Select组件下拉列表的高度？

Chakra UI的Select组件下拉菜单是独立于输入框的弹出层，你之前设置的maxH等属性只作用于输入框本身，要限制下拉列表高度，需要针对下拉菜单容器单独配置：

解决方案：使用menuProps属性 #

Select的下拉菜单基于Menu组件实现，通过menuProps可以将样式传递给下拉菜单的内部容器，设置最大高度和滚动属性：

<Select
  bg={Colors.background_white}
  variant="outline"
  placeholder={placeholder}
  onChange={handleChoose}
  onBlur={onBlur}
  ref={ref}
  disabled={disabled}
  name={name}
  h="3rem"
  border={hasBorder ? `1px solid ${Colors.border_input}` : "none"}
  isDisabled={options?.length === 0 || !options}
  _focus={{
    border: `1px solid ${Colors.primary_main}`,
    color: Colors.text_primary,
  }}
  _focusVisible={{
    border: `1px solid ${Colors.primary_main}`,
    color: Colors.text_primary,
  }}
  _hover={{
    border: `1px solid ${Colors.primary_main}`,
    color: Colors.text_primary,
  }}
  value={value}
  // 添加下拉菜单高度控制配置
  menuProps={{
    sx: {
      maxHeight: "200px", // 自定义最大高度，可替换为rem单位如"12rem"
      overflowY: "auto" // 超出高度时显示垂直滚动条
    }
  }}
>
  {options?.map((option) => (
    <option key={option.label + option.value} value={option.value}>
      {option.label}
    </option>
  ))}
</Select>

说明 #

• 移除了你之前无效的listStyle、maxH（输入框上的）等配置，这些属性无法作用于下拉菜单
• 通过menuProps.sx直接控制下拉菜单容器的样式，设置maxHeight和overflowY: auto后，过长的下拉列表会自动出现滚动条，不会超出父组件或屏幕范围

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