你如何增加选择菜单内容的高度？答案

【问题标题】：How do you increase the select menu content height?你如何增加选择菜单内容的高度？
【发布时间】：2021-09-25 06:09:25
【问题描述】：

编辑：

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

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

使用组件的titleView 属性的问题是，当标题高度较高时，某些选择菜单项无法正确呈现（隐藏）。

假设在上图中，“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;
}

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

【问题讨论】：

你能分享一个codeandbox的例子吗？
嗨@gionic，我添加了一个沙盒链接。请看上面，谢谢！
最好的形式是使用此处呈现的相关 HTML 和 CSS 来说明和重现这个问题，甚至可以作为 sn-p。

标签： css reactjs css-selectors react-component

【解决方案1】：

如果您检查docs SelectMenu 有height 属性。

所以你可以添加

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

检查这个example

【讨论】：

谢谢！我已经尝试过了，但它不起作用。但是我刚刚修复了它！我使用了 'minHeight' 属性而不是 'height'，并且效果很好。
好的，尽管在您的示例中我的解决方案有效。

【解决方案2】：

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

minHeight 是设置为同时增加 SelectMenuContent 的正确属性。

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

【讨论】：