如果需要
修改 Antd 滚动条的
样式，可以通过以下几种方式实现：
1. 使用 CSS
样式覆盖原有
样式
Antd 滚动条的
样式可以通过 CSS
样式覆盖，具体可以通过以下代码实现：
```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 通过提供主题定制功能，可以方便地
修改滚动条
样式。具体可以通过以下代码实现：
```javascript
// 在 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={{}}` 属性，具体可以通过以下代码实现：
```javascript
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`。具体可以通过以下代码实现：
```javascript
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;
```
扫一扫
7165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
