如何避免React Material UI Table组件导致嵌套Grid组件宽度扩展

Hey there, let’s sort out this issue where your Grid gets stretched out once the Table loads its data. The root problem here is that Material UI’s Table defaults to expanding to fit its content, which pushes the parent Grid container wider than you want. Here are a few targeted fixes you can drop right into your code:

1. Add Horizontal Overflow Control to TableContainer #

The quickest win is to make the TableContainer contain the Table with a horizontal scrollbar when content gets too wide. This way, the Table stays locked within the Grid’s width instead of stretching it.

Update your Stakingfield component’s TableContainer like this:

<TableContainer component={Paper} sx={{ overflowX: 'auto', maxWidth: '100%' }}>
  <Table size="small" tableLayout="fixed"> {/* Add this tableLayout prop */}
    <TableHead>
      <TableRow>
        <!-- Your existing table headers -->
      </TableRow>
    </TableHead>
    <!-- Rest of your table content -->
  </Table>
</TableContainer>

• overflowX: 'auto' adds a horizontal scrollbar only when content exceeds the container width, keeping things tidy.
• tableLayout="fixed" forces the Table to respect its parent’s width instead of expanding to fit long cell content. If you want more control, you can even set explicit widths on individual TableCells, like <TableCell sx={{ width: '30%' }}>Validator Address</TableCell>.

2. Lock Parent Containers to Their Intended Width #

Double-check that your Grid and outer Box components enforce their width constraints. In your Wallet component, the Grid already has width="100%", but adding a maxWidth will ensure it never spills beyond the viewport:

<Grid container rowSpacing={2} sx={{ paddingInline: "25px", width: "100%", maxWidth: '100vw' }}>
  <!-- Your existing Grid items -->
</Grid>

maxWidth: '100vw' guarantees the Grid stays within the browser window’s width, even if the Table tries to push it wider.

3. Optional: Tame Long Text in Table Cells #

If you’re dealing with extra-long content (like validator addresses), you can add text truncation to prevent cells from stretching the table:

<TableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
  {row.validatorAddress}
</TableCell>

This will cut off long addresses with an ellipsis instead of letting them blow up the column width.

Full Modified renderTable Function #

Here’s how your updated renderTable in Stakingfield would look with all these fixes:

const renderTable = () => {
  if (stakingRes !== "") {
    return (
      <TableContainer component={Paper} sx={{ overflowX: 'auto', maxWidth: '100%' }}>
        <Table size="small" tableLayout="fixed">
          <TableHead>
            <TableRow>
              <TableCell sx={{ width: '35%' }}>Validator Address</TableCell>
              <TableCell sx={{ width: '20%' }}>Delegated Amount</TableCell>
              <TableCell sx={{ width: '15%' }}>Token</TableCell>
              <TableCell sx={{ width: '30%' }}>Shares</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {stakingRes.map((row, index) => (
              <TableRow key={index}>
                <TableCell component="th" scope="row" sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                  {row.validatorAddress}
                </TableCell>
                <TableCell>{Number(row.delegatedAmount) / 10**18}</TableCell>
                <TableCell>{row.denom}</TableCell>
                <TableCell>{Number(row.shares) / 10**18}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    );
  } else {
    return <div></div>;
  }
};

These changes should keep your Grid locked at its original width while letting the Table handle overflow content smoothly. Give them a test run—let me know if you need to tweak anything further!

内容的提问来源于stack exchange，提问作者code_learner93