如何增加 select 菜单内容的高度？

Question

编辑：

沙盒：https://codesandbox.io/s/clever-leftpad-dkjh7?file=/index.js:0-1748

我正在使用 React，evergreen-ui SelectMenu 组件。

使用组件 titleView 属性的问题在于，当 header 高度较高时，某些 select 菜单项无法正确呈现（隐藏） .

据说在上图中，“hhhhhhh”应该显示但被隐藏了。

  public render() {
    const { children } = this.props;
    let options = [];
    options.push({ label: '00000000', value: '00000000' });
    options.push({ label: '11111111', value: '11111111' });
    options.push({ label: '22222222', value: '22222222' });
    options.push({ label: 'aaaaaaaa', value: 'aaaaaaaa' });
    options.push({ label: 'bbbbbbbb', value: 'bbbbbbbb' });
    options.push({ label: 'cccccccc', value: 'cccccccc' });
    options.push({ label: 'dddddddd', value: 'dddddddd' });
    options.push({ label: 'eeeeeeee', value: 'eeeeeeee' });
    options.push({ label: 'ffffffff', value: 'ffffffff' });
    options.push({ label: 'gggggggg', value: 'gggggggg' });
    options.push({ label: 'hhhhhhhh', value: 'hhhhhhhh' });

    return (
      <SelectMenu
        className={'someClassName'}
        filterPlaceholder={'Filter by name...'}
        isMultiSelect={true}
        titleView={this.getCustomTitleView}
        hasTitle={true}
        hasFilter={true}  
        options={...options}
        onSelect={this.onDeviceSelectHandler}
        onDeselect={this.onDeviceDeselectHandler}
      >
        {children}
      </SelectMenu>
    );
  }


  private getCustomTitleView() {
    return (
      <Pane
        display="flex"
        flexDirection="column"
        borderBottom="default"
        padding={8}
        boxSizing="border-box"
      >
        <Heading size={400}>{this.props.title}</Heading>
        <Pane marginTop={5}>
          <Button width={'100%'} justifyContent="center">
            Clear all selections
          </Button>
        </Pane>
      </Pane>
    );
  }

我已经尝试向组件添加 className 属性以使用以下 CSS （见下文）希望它会动态增加高度但到目前为止没用。

.someClassName:nth-of-type(1) {
  height: 285px;
}

然而，通过控制台手动添加它是可行的：

Answer 1

如果检查 docs SelectMenu 有 height 属性.

所以你可以添加

<SelectMenu height={285} or whatever height it suits you.

勾选这个example

Answer 2

事实证明，height 属性而不是文档中提到的

minHeight是对的属性设置也要增加SelectMenuContent。

<SelectMenu
   minHeight={282}
   ...
>
...
</SelectMenu>

如何增加 select 菜单内容的高度？

How do you increase the select menu content height?

css

css-selectors

reactjs

react-component