Material UI DropDownMenu 占 100% 高度

Material UI DropDownMenu taking 100% height

我在 table 列内呈现的特定页面中有一个 DropDownMenu。

当我点击打开菜单时,它以页面高度的 100% 打开。

我在文档中和社区中都找不到类似的东西。

我与子组件没有 relative/absolute 容器关系。

我尝试设置maxHeight,但还是一样。

感谢您的帮助。

编辑:

一些代码。

这是实例化 DropDownMenu 的组件:

export default ({
  variables,
}: Props) => (
  <Table multiSelectable>
    <TableHeader enableSelectAll>
      <TableRow>
        <TableHeaderColumn className={styles.headerColumn}>Variável</TableHeaderColumn>
        <TableHeaderColumn className={styles.headerColumn}>Tipo</TableHeaderColumn>
        <TableHeaderColumn className={styles.headerColumn}>Linha 01</TableHeaderColumn>
        <TableHeaderColumn className={styles.headerColumn}>Linha 02</TableHeaderColumn>
        <TableHeaderColumn className={styles.headerColumn}>Linha 03</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>
      {variables.map(variable => (
        <TableRow key={variable.id}>
          <TableRowColumn className={styles.column}>{variable.header}</TableRowColumn>
          <TableRowColumn className={styles.columnDropdown}>
            <DropDownMenu value={variable.type}>
              <MenuItem value="numerical" primaryText="Numérica" />
              <MenuItem value="categorical" primaryText="Categórica" />
              <MenuItem value="key" primaryText="Chave" />
              <MenuItem value="answer" primaryText="Resposta" />
            </DropDownMenu>
          </TableRowColumn>
          {variable.line.map(line => (
            <TableRowColumn key={line} className={styles.column}>{line}</TableRowColumn>
          ))}
        </TableRow>
      ))}
    </TableBody>
  </Table>
);

此代码使用 SASS 模块:

.headerColumn {
  font-size: 16px !important;
}

.column {
  font-size: 14px !important;
}

.columnDropdown {
  @extend .column;
  padding-left: 0 !important;
}

我在这个组件中没有浮动,也没有绝对值。分析打开的菜单,占用top: 0max-height: 1014px;。说不出为什么。

[data-reactroot] {
  height: 100% !important;
}

这搞砸了。