基于Material UI实现键值对表格如何解决长键挤压值的对齐问题

你遇到的对齐问题根源是每一行的布局是独立的，左侧键列的宽度随内容动态变化，没有统一的宽度约束，因此右侧值列的起始位置会随左侧键的长度变化而偏移。

优化实现方案 #

推荐采用CSS Grid统一控制列宽+数据抽离遍历的方案，既解决对齐问题，也大幅简化代码逻辑：

import React from 'react';
import {Box, Container, Typography} from '@material-ui/core';

export default function Hello( ) {
  // 抽离键值对数据，后续新增/修改直接调整该数组即可
  const summaryList = [
    { label: 'Country 123', value: 'USA' },
    { label: 'Country 4323', value: 'USA' },
    { label: 'Country', value: 'USA' },
  ]
 
  return (
      <Container>
        <Box pl={2} pb={3}>
          <Typography variant="h4">
            Summary
          </Typography>
        </Box>
        {/* 统一用CSS Grid控制两列宽度，左列固定200px，右列占剩余全部空间 */}
        <Box 
          sx={{
            display: 'grid',
            gridTemplateColumns: '200px 1fr',
            gap: '16px',
            alignItems: 'center'
          }}
        >
          {summaryList.map((item, index) => (
            <React.Fragment key={index}>
              <Box sx={{p: 2}}>
                {item.label}
              </Box>
              <Box sx={{p: 2}}>
                {item.value}
              </Box>
            </React.Fragment>
          ))}
        </Box>
      </Container>
  )
}

方案说明 #

• 布局层面：通过gridTemplateColumns: '200px 1fr'给所有行的左列统一设置固定宽度，右列自动占满剩余空间，不管左列内容长度是多少，右列的起始位置完全一致，对齐问题直接解决。如果你的键可能出现更长的内容，也可以把左列宽度改成minmax(180px, max-content)，自动适配最长的键的宽度，同时保证所有列对齐。
• 代码层面：抽离键值对为数组遍历渲染，避免了重复编写多段几乎完全相同的Grid代码，后续维护成本更低。

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