材质 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;
}

这搞砸了。