css - 你如何增加选择菜单内容的高度？

Question

编辑：

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

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

使用组件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;
}

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

标签： cssreactjscss-selectorsreact-component

Answer 1

如果您检查文档 SelectMenu具有height属性。

所以你可以添加

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

检查这个例子