如何让 Material UI TableCell 组件的子组件填充单元格的高度？

Question

我正在使用 MUI v5 作为表格。 该表有两列，其中单元格包含多行文本字段。 我希望 TextFields 完全填充单元格区域。 问题是，一旦您开始在一个列的文本字段中输入行，另一列中文本字段的高度将保持不变，它不会填充表格单元格。 图片：

Red 是 TableCell 的 backgroundColor，黄色是 TextField 的 backgroundColor。 我不想看到任何红色，我希望左列中的文本字段在添加右侧文本字段中的数据时增加其高度。

我尝试了高度 100% 和位置的不同 CSS 组合。 我也不能在 TableCell 上使用 flexbox，在 Input 上使用 flexGrow，因为这会破坏 TableCell 并阻止它填充行的高度。

代码示例： https : //codesandbox.io/s/mui-playground-forked-xst8h?file=/src/containers/app.js

import React from "react";
import * as material from "@material-ui/core";

const App = () => (
  <material.TableContainer component={material.Paper}>
    <material.Table aria-label="simple table" stickyHeader={true} size="small">
      <material.TableBody>
        <material.TableRow>
          <material.TableCell
            align="center"
            style={{
              backgroundColor: "red",
              padding: 0,
              height: "100%"
            }}
          >
            <material.TextField
              multiline
              variant="outlined"
              style={{
                flexGrow: 1,
                height: "100%",
                width: "100%",
                backgroundColor: "yellow"
              }}
            />
          </material.TableCell>

          <material.TableCell
            align="center"
            style={{
              backgroundColor: "red",
              padding: 0
            }}
          >
            <material.TextField
              multiline
              variant="outlined"
              style={{
                height: "100%",
                width: "100%",
                backgroundColor: "yellow"
              }}
            />
          </material.TableCell>
        </material.TableRow>
      </material.TableBody>
    </material.Table>
  </material.TableContainer>
);
export default App;

Answer 1

您需要将height: 0设置为td元素，然后将height: 100%设置为textarea元素。 还需要为.MuiOutlinedInput-inputMultiline类设置height: 100%