如何使用 React 更改 Material UI 表格單元格的寬度？

Question

我有以下問題，我嘗試增加表格單元格的寬度，但我不知道該怎么做。 我與 Typescript 合作。 我只能 select TableCellProps 的大小，我只能設置中或小。 有沒有人有辦法解決嗎？ 我想放大藍色表格單元格。 1

<TableRow>
  <TableCell align="left">address</TableCell> //sample Code, how i can set here the width
</TableRow>

作為第二個問題，你怎么能限制整個表格的高度，以至於你必須在表格中水平和垂直滾動？

Answer 1

您可以像這樣簡單地將寬度添加到單元格：

<TableCell width={300}>Dessert (100g serving)</TableCell>

這將使該單元格寬 300 像素。

Answer 2

如果您還沒有安裝 material-ui，則需要先安裝如下：

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

然后將其導入文件頂部，如下所示：

   import {          
      createStyles,
      Grid,
      makeStyles,          
      Table,
      TableBody,
      TableCell,
      TableContainer,
      TableHead,
      TableRow,
      Theme,
      withStyles,
   } from '@material-ui/core';

像這樣創建一個 function 並根據需要設置寬度值：

    const StyledTableCell = withStyles((theme: Theme) =>
  createStyles({
    head: {
      backgroundColor: theme.palette.common.black,
      color: theme.palette.common.white,
      width: '50%',
      fontSize: 20
    },
  }),
)(TableCell);

現在查看以下示例，了解如何在代碼中使用StyledTableCell ：

              <Table
            aria-label="collapsible table"
            aria-labelledby="tableTitle"
          >
            <TableHead>
              <TableRow>
                <TableCell />
                <TableCell>Document Title</TableCell>
                <StyledTableCell  align="right">Document Content</StyledTableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <Row key={row.documentId} row={row} />
              ))}
            </TableBody>
          </Table>