Antd：如何修改表格排序器Tooltip的字体大小

首先你代码里有个拼写错误：showSorterTooltip配置里的tootltip多打了个t，应该改成tooltip，先修正这个问题试试：

<Table 
  loading={loading} 
  columns={columns} 
  style={{ padding: 30 }} 
  showSorterTooltip={{ tooltip: { style: { fontSize: '11px' } } }}
/>

如果修正拼写后还是不生效，可能是Antd版本的配置差异，可以试试下面两种方法：

方法一：给列单独配置Tooltip属性 #

在columns数组的目标列中，单独设置showSorterTooltip，传入Tooltip的overlayStyle属性：

const columns = [
  {
    title: '你的列标题',
    dataIndex: 'columnKey',
    sorter: (a, b) => a.columnKey - b.columnKey,
    showSorterTooltip: {
      tooltipProps: {
        overlayStyle: { fontSize: '11px' }
      }
    }
  },
  // 其他列...
];

方法二：全局CSS覆盖样式 #

如果需要统一修改所有排序器的Tooltip样式，可以直接写全局CSS，精准定位表格排序器的Tooltip：

.ant-table-sorter .ant-tooltip-inner {
  font-size: 11px;
}

这样就能强制覆盖默认的字体大小，解决无法访问样式属性的问题。

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