Antd 滚动条样式修改

如果需要修改 Antd 滚动条的样式，可以通过以下几种方式实现：

1. 使用 CSS 样式覆盖原有样式

Antd 滚动条的样式可以通过 CSS 样式覆盖，具体可以通过以下代码实现：

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 5px;
}

.ant-table-body::-webkit-scrollbar-thumb {
  background-color: #1890ff;
}

2. 使用自定义主题配置

Antd 通过提供主题定制功能，可以方便地修改滚动条样式。具体可以通过以下代码实现：

// 在 less 文件中定义主题变量
@scrollbar-width: 10px;
@scrollbar-color: #c1c1c1;
@scrollbar-track-color: #f5f5f5;
@scrollbar-thumb-hover-color: #1890ff;

// 在 webpack 配置文件中引入主题文件
const { getThemeVariables } = require('antd/dist/theme');
const themeVariables = getThemeVariables({ dark: true });
const lessToJs = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

const themeVariablesContent = fs.readFileSync(path.join(__dirname, './theme.less'), 'utf8');
const themeVariablesJson = lessToJs(themeVariablesContent);

module.exports = {
  // ...
  module: {
    // ...
  },
  plugins: [
    // ...
  ],
  resolve: {
    // ...
  },
  // 在 antd 主题变量基础上添加自定义主题变量
  lessLoader: {
    lessOptions: {
      modifyVars: {
        ...themeVariables,
        ...themeVariablesJson,
      },
      javascriptEnabled: true,
    },
  },
};

然后在需要修改滚动条的组件中，设置 `scrollbar={{}}` 属性，具体可以通过以下代码实现：

import { Table } from 'antd';

const dataSource = [
  // ...
];

const columns = [
  // ...
];

const App = () => {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      scrollbar={{
        width: '@scrollbar-width',
        height: '@scrollbar-width',
        backgroundColor: '@scrollbar-track-color',
        thumbColor: '@scrollbar-color',
        thumbHoverColor: '@scrollbar-thumb-hover-color',
      }}
    />
  );
};

export default App;

3. 使用第三方插件

除了上述两种方式，还可以使用第三方插件来修改滚动条样式，如 `react-custom-scrollbars`。具体可以通过以下代码实现：

import { Table } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';

const dataSource = [
  // ...
];

const columns = [
  // ...
];

const App = () => {
  return (
    <Scrollbars
      style={{ height: 200 }}
      renderThumbVertical={({ style, ...props }) => (
        <div
          {...props}
          style={{
            ...style,
            width: 10,
            borderRadius: 5,
            backgroundColor: '#c1c1c1',
          }}
        />
      )}
    >
      <Table dataSource={dataSource} columns={columns} />
    </Scrollbars>
  );
};

export default App;