React+Antd修改Table组件滚动条样式的操作代码

 更新时间:2024年12月16日 10:16:03   作者:苦逼的猿宝  
这篇文章主要介绍了React+Antd修改Table组件滚动条样式的操作代码,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

版本 

Antd   @5.x.x

React @18.x.x

Tsx 

<Table
    dataSource={SocrePaMing.length > 0 ? SocrePaMing : []}
    columns={tableScoreColumns}
    rowKey="attribute"
    pagination={false}
    className="custom-table"
    scroll={{ y: 400 }} 
/>

Css 

.ant-table-body {
  scrollbar-width: auto;
  scrollbar-color: auto;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgb(219, 219, 219);
}

效果

到此这篇关于React+Antd修改Table组件滚动条样式的文章就介绍到这了,更多相关react antd 滚动条样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • react-router4 配合webpack require.ensure 实现异步加载的示例

    react-router4 配合webpack require.ensure 实现异步加载的示例

    本篇文章主要介绍了react-router4 配合webpack require.ensure 实现异步加载的示例,非常具有实用价值,需要的朋友可以参考下
    2018-01-01
  • react-router 路由切换动画的实现示例

    react-router 路由切换动画的实现示例

    这篇文章主要介绍了react-router 路由切换动画的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 用React实现一个简单的虚拟列表

    用React实现一个简单的虚拟列表

    虚拟列表是现在比较常用的前端渲染大数据列表的方案,目前也有很多组件库和工具库也都有对应的实现,本文将给大家介绍一下如何用React实现一个简单的虚拟列表,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • React组件实例三大核心属性State props Refs详解

    React组件实例三大核心属性State props Refs详解

    组件实例的三大核心属性是:State、Props、Refs。类组件中这三大属性都存在。函数式组件中访问不到 this,也就不存在组件实例这种说法,但由于它的特殊性(函数可以接收参数),所以存在Props这种属性
    2022-12-12
  • React纯前端模拟实现登录鉴权

    React纯前端模拟实现登录鉴权

    这篇文章主要为大家详细介绍了React纯前端模拟实现登录鉴权的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 关于React中使用window.print()出现页面无响应问题解决记录

    关于React中使用window.print()出现页面无响应问题解决记录

    这篇文章主要介绍了React中使用window.print()出现页面无响应问题解决记录,首先问题原因可能是操作了document但是并未进行销毁(可能是),具体问题解决思路参考下本文吧
    2021-11-11
  • 基于Webpack5 Module Federation的业务解耦实践示例

    基于Webpack5 Module Federation的业务解耦实践示例

    这篇文章主要为大家介绍了基于Webpack5 Module Federation的业务解耦实践示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • React学习笔记之事件处理(二)

    React学习笔记之事件处理(二)

    这篇文章主要跟大家介绍了关于React中事件处理的相关资料,文中通过示例代码介绍的非常详细,对大家学习React具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • react Scheduler 实现示例教程

    react Scheduler 实现示例教程

    这篇文章主要为大家介绍了react Scheduler 实现示例教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 解决React报错`value` prop on `input` should not be null

    解决React报错`value` prop on `input` should&

    这篇文章主要为大家介绍了React报错`value` prop on `input` should not be null解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论