如何讓 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%