【Antd5】修改table组件默认滚动条样式

项目场景：

新项目使用了Antd 5，在使用表格时发现滚动条样式变成了浏览器的默认滚动条样式。因为之前一直在用Antd 4.* 版本，最初我以为是新项目中某个样式出现了问题造成的，翻阅文档发现是Antd5开始Table的滚动条需要手动设置。

---

问题描述

根据文档来看，Table在使用滚动条的样例中都单独设置的Table的className。单独安装了一个antd-style的包，但是安装之后报错Property 'antCls' does not exist on type 'FullToken'.typescript(2339) 。

import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ css, token }) => {
  const { antCls } = token;
  return {
    customTable: css`
      ${antCls}-table {
        ${antCls}-table-container {
          ${antCls}-table-body,
          ${antCls}-table-content {
            scrollbar-width: thin;
            scrollbar-color: #eaeaea transparent;
            scrollbar-gutter: stable;
          }
        }
      }
    `,
  };
});

const App: React.FC = () => {
  const { styles } = useStyle();
  // ！！！！！省略了columns和dataSource代码，太多了！！！！！- start
  const columns: any;
  const dataSource: any;
  // ！！！！！省略了columns和dataSource代码，太多了！！！！！- end
  return (
    <Table<DataType>
      className={styles.customTable}
      columns={columns}
      dataSource={dataSource}
      bordered
      size="middle"
      scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}
    />
  );
};

export default App;

---

解决方案：

直接使用global.css来覆盖Antd的样式来解决

.ant-table-body,
.ant-table-content {
	scrollbar-width: thin;
    scrollbar-color: #eaeaea transparent;
    scrollbar-gutter: stable;
}

这里采用的样式是和antd文档上一致的样式，可以根据自己需要的进行修改。