Ant Design Table 操作列设置 align center 无法居中

现象

Table在column中设置了align: center后，列名是居中了，但是每行的操作按钮还是靠左对齐。

原始代码

render中直接返回的是一个数组。

查看真实渲染后的结果，发现最后是套了一层div，这个div是flex布局，且设置了justify-content: flex-start。

const columns: ProColumns<TableListItem>[] = [
    {
      title: "ID",
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: 'Action',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      render: (text, record, _, action) => [
        <div>按钮1</div>,
        <div>按钮2</div>,
      ],
    }
]

解决

不再返回数组，直接返回一个ReactNode，自己写样式。flex布局，justify-content指定center。

const columns: ProColumns<TableListItem>[] = [
    {
      title: "ID",
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: 'Action',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      render: (text, record, _, action) =>  {
        return <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                gap: '10px',
            }}>
            <div>按钮1</div>
            <div>按钮2</div>
        </div>
      },
    }
]

GitHub issue

https://github.com/ant-design/pro-components/issues/6515