材质UI DropDownMenu占据100％的高度

Question

我在一个特定页面中有一个DropDownMenu，它在一个表格列中呈现。

当我点击打开菜单时，它会以100％的页面高度打开。

我在文档和社区中都没有发现这样的内容。

我与子组件没有相对/绝对容器关系。

我尝试设置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: 0和max-height: 1014px;。不能说出原因。

Answer 1

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

这搞砸了。