脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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实现懒加载(无限滚动)列表方式

    原生+React实现懒加载(无限滚动)列表方式

    这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • React Native 环境搭建的教程

    React Native 环境搭建的教程

    本篇文章主要介绍了React Native 环境搭建的教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React中使用Vditor自定义图片详解

    React中使用Vditor自定义图片详解

    这篇文章主要介绍了React中使用Vditor自定义图片详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent

    React报错Type '() => JSX.Element[]&apos

    这篇文章主要为大家介绍了React报错Type '() => JSX.Element[]' is not assignable to type FunctionComponent解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React Native使用fetch实现图片上传的示例代码

    React Native使用fetch实现图片上传的示例代码

    本篇文章主要介绍了React Native使用fetch实现图片上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 通过React-Native实现自定义横向滑动进度条的 ScrollView组件

    通过React-Native实现自定义横向滑动进度条的 ScrollView组件

    开发一个首页摆放菜单入口的ScrollView可滑动组件,允许自定义横向滑动进度条,且内部渲染的菜单内容支持自定义展示的行数和列数,在内容超出屏幕后,渲染顺序为纵向由上至下依次排列,对React Native横向滑动进度条相关知识感兴趣的朋友一起看看吧
    2024-02-02
  • React useState的错误用法避坑详解

    React useState的错误用法避坑详解

    这篇文章主要为大家介绍了React useState的错误用法避坑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • react实现点击选中的li高亮的示例代码

    react实现点击选中的li高亮的示例代码

    本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React项目中decorators装饰器报错问题解决方案

    React项目中decorators装饰器报错问题解决方案

    这篇文章主要介绍了React项目中decorators装饰器报错，本文给大家分享问题所在原因及解决方案，通过图文实例相结合给大家介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • react native 获取地理位置的方法示例

    react native 获取地理位置的方法示例

    这篇文章主要介绍了react native 获取地理位置的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08

最新评论