脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react antd 滚动条样式

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 Hook 'useEffect' is called in function报错解决

    React Hook 'useEffect' is call

    这篇文章主要为大家介绍了React Hook 'useEffect' is called in function报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 在React中使用React.createRef：更优雅的DOM引用方式

    在React中使用React.createRef：更优雅的DOM引用方式

    React提供了多种方式来引用DOM元素,其中React.createRef()是一种更为现代、更优雅的方式,在这篇文章中,我们将深入了解React.createRef()的应用,以及它为开发者带来的便利,感兴趣的朋友一起看看吧
    2024-01-01
  • 如何使用Redux Toolkit简化Redux

    如何使用Redux Toolkit简化Redux

    redux-toolkit是目前redux官方推荐的编写redux逻辑的方法，针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化，官方总结了四个特点是简易的/有想法的/强劲的/高效的，总结来看，就是更加的方便简单了
    2022-12-12
  • React路由跳转的实现示例

    React路由跳转的实现示例

    在React中,可以使用多种方法进行路由跳转,本文主要介绍了React路由跳转的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • React18系列reconciler从0实现过程详解

    React18系列reconciler从0实现过程详解

    这篇文章主要介绍了React18系列reconciler从0实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • react 跳转后路由变了页面没刷新的解决方案

    react 跳转后路由变了页面没刷新的解决方案

    最近在学习React的过程中遇到了路由跳转后页面不刷新的问题，本文就详细的介绍一下解决方法，需要的朋友们下面随着小编来一起学习学习吧
    2021-06-06
  • React声明组件的方法总结

    React声明组件的方法总结

    这篇文章主要给大家介绍了react声明组件有哪几种方法,各有什么不同,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • react hooks实现防抖节流的方法小结

    react hooks实现防抖节流的方法小结

    这篇文章主要介绍了react hooks实现防抖节流的几种方法,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-04-04
  • React使用fullpage.js实现整屏翻页功能

    React使用fullpage.js实现整屏翻页功能

    最近笔者在完成一个移动端小项目的过程中需要实现整屏翻页的效果；调研完毕之后,最终决定使用pullPage.js实现此功能,fullPage.js使用起来比较方便,并且官网上也给了在react项目中使用的demo,本文记录了这个第三方库的使用过程,感兴趣的朋友可以参考下
    2023-11-11
  • React Fiber结构的创建步骤

    React Fiber结构的创建步骤

    这篇文章主要介绍了React Fiber结构的创建步骤，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04

最新评论