html - Material 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;
}

我在这个组件中没有 float ，也没有绝对值。分析打开的菜单，它取top: 0 和max-height: 1014px;。不能说为什么。

Answer 1

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

这把事情搞砸了。