iPhone端React+Amplify UI表格表头图标被挤压问题排查

针对iPhone Safari上Amplify UI表格表头图标被挤压甚至消失的问题，核心原因是iOS Safari对flex布局的收缩规则处理和桌面端浏览器不一致，仅给图标加minWidth:1rem不足以阻止父容器收缩。以下是可行的修复方案：

1. 锁定表头单元格的最小宽度与收缩规则 #

直接给表头单元格（TableHeaderCell）设置最小宽度，并禁止其收缩，从根源避免整体空间被压缩：

<TableHeaderCell 
  style={{ 
    minWidth: '90px', // 根据你的表头文字长度调整，确保图标+文字有足够空间
    flexShrink: 0 
  }}
>
  表头文字
  <SortIcon />
</TableHeaderCell>

如果用CSS类名覆盖（推荐）：

.amplify-table-header-cell {
  min-width: 90px;
  flex-shrink: 0;
}

2. 给图标外层容器设置强制不收缩 #

把表头文字和图标放在一个单独的flex容器里，强制这个容器不收缩，确保图标不会被挤压：

<TableHeaderCell>
  <div style={{ 
    display: 'flex', 
    alignItems: 'center', 
    gap: '6px',
    flexShrink: 0, // 关键：禁止容器收缩
    minWidth: 'min-content' // 让容器宽度适配内容最小需求
  }}>
    <span>表头文字</span>
    <SortIcon style={{ flexShrink: 0 }} />
  </div>
</TableHeaderCell>

3. 修复Safari的flex布局特殊行为 #

iOS Safari对flex容器的min-width默认处理存在差异，可通过以下CSS强制修正：

.amplify-table-header-cell {
  overflow: visible !important; // 避免默认overflow:hidden裁剪图标
  min-width: min-content !important;
}

4. 排查并覆盖Amplify UI的默认样式 #

用浏览器开发者工具（iPhone可通过Safari远程调试）查看表头单元格的默认样式，重点检查是否存在flex-basis、overflow或white-space设置导致挤压，针对性覆盖：

.amplify-table-header-cell {
  flex-basis: auto !important; // 取消固定基准宽度
  white-space: nowrap; // 防止文字换行挤压图标
}

验证时可以用Chrome的iPhone设备模拟器，或者直接在iPhone Safari中测试，确保图标不再被挤压。

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