Shopify Polaris ButtonGroup间距设置及IndexTable表头高度异常问题

1. ButtonGroup spacing 属性无效的原因及修复 #

Polaris ButtonGroup的spacing属性不支持自定义像素值，它只接受Polaris设计系统预设的间距尺度值：

• 数字类型：0、1、2、3等，对应设计系统中8px倍数的间距（比如1对应8px，2对应16px）
• 预设字符串："tight"、"loose"

你之前传入的"1px"、{"1px"}这类值都不符合组件的参数要求，所以不会生效。如果需要小间距，直接用spacing={1}或者spacing="tight"即可。

2. IndexTable表头高度异常的核心修复 #

你当前把批量操作按钮塞进了headings的title字段里，这是错误的用法——IndexTable提供了专门的bulkActions属性来配置批量操作按钮，这才是Shopify后台产品列表采用的标准方式，既能避免表头高度被撑开，也符合组件的设计逻辑。

修改后的代码示例 #

<IndexTable
  resourceName={resourceName}
  itemCount={QRCodes.length}
  selectedItemsCount={
    allResourcesSelected ? "ALL" : selectedResources.length
  }
  onSelectionChange={handleSelectionChange}
  headings={[
    { title: "Title" },
    { title: "Status" },
    { title: "Date created" },
  ]}
  // 用bulkActions配置批量操作按钮
  bulkActions={
    selectedResources.length > 0 ? (
      <ButtonGroup spacing={1}>
        <Button>Cancel</Button>
        <Button>Save</Button>
      </ButtonGroup>
    ) : undefined
  }
  loading={loading}
>
  {rowMarkup}
</IndexTable>

这样修改后，批量操作按钮会自动出现在表头的批量操作区域，不会破坏原表头的高度布局，和Shopify后台产品列表的表现一致。

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