【React】Ant Design 5.x版本table scroll滚动条样式自定义

新版里table的滚动条样式由:scrollbar-widthscrollbar-color接管,导致之前的伪类方式失效!

环境

  • antd: ^5.14.1
  • react: ^18

解决方案:

若想延续伪类方式修改滚动条样式,可以在定义伪类样式文件里加入以下片段:

.ant-table-body {
  scrollbar-width: auto;
  scrollbar-color: auto;
}

完整设置如下:

.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);
}

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/642500.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

什么是JDK21虚拟线程

JDK21虚拟线程 1. 来一段小故事2. 什么是虚拟线程3. 虚拟线程的几个关键特点4.细说关键特点1.为什么轻量级的1.传统线程运行时间2.虚拟线程运行时间3.对垃圾回收的影响 2.非绑定OS线程的魅力所在3.和传统相比为何易于使用4.阻塞优化有什么好处1.什么是阻塞优化2.JDK 21虚拟线程…

配置docker阿里云镜像地址

一、安装docker的步骤: 1.yum install -y yum-utils 2.yum-config-manager --add-repo http://mirrors.aliyun.com/docker- ce/linux/centos/docker-ce.repo --配置阿里云仓库3.yum makecache fast4.yum install docker-ce -y5.docker version …

【LVGL_Linux安装NXP的Gui-Guider】

GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具,可以通过拖放控件的方式设计LVGL GUI页面,加速GUI的设计。 虽然他只支持自家芯片,但是应用层我们可以直接拿来用作其他MCU上。 GUI-Guider 下载 NXP官网下载:链接&#xff1…

关于sklearn决策树手动指定节点进行剪枝调整的实现

一、决策树剪枝 决策树的剪枝方式有两种,预剪枝和后剪枝,后剪枝在python的sklearn方法中提供了CCP代价复杂度剪枝法(Cost Complexity Pruning)具体实现代码如下: # -*- coding: utf-8 -*- from sklearn.datasets imp…

AI模型抉择:开源VS闭源,谁主沉浮?

AI模型抉择:开源VS闭源,谁主沉浮? 😄生命不息,写作不止 🔥 继续踏上学习之路,学之分享笔记 👊 总有一天我也能像各位大佬一样 🏆 博客首页 怒放吧德德 To记录领地 &am…

软件设计师备考 | 案例专题之数据库设计 概念与例题

相关概念 关注上图中的两个部分: 概念结构设计 设计E-R图,也即实体-联系图。 工作步骤:选择局部应用、逐一设计分E-R图、E-R图合并。进行合并时,它们之间存在的冲突主要有以下3类: 属性冲突。同一属性可能会存在于…

如何通过OpenHarmony的音频模块实现录音变速功能?

简介 OpenAtom OpenHarmony(以下简称“OpenHarmony”)是由开放原子开源基金会孵化及运营的开源项目,是面向全场景、全连接、全智能时代的智能物联网操作系统。 多媒体子系统是OpenHarmony系统中的核心子系统,为系统提供了相机、…

MySQL中视图是什么,有什么作用

目录 一、视图的简介 1.1 什么是视图? 1.2 为什么使用视图? 1.3 视图有哪些规则与限制? 1.4 视图能否更新? 二、视图的创建 三、视图的作用 3.1 用视图简化复杂的联结 3.2 用视图格式化检索出的数据 3.3 用视图过滤数据…

redisson 使用fastJson2序列化

前因:一个项目:有人用redisTemplete存数据(使用了fastjson2),使用redisson取的时候就会报错。要让redisTemplete与redisson序列化一致 一、自定义序列化器 import com.alibaba.fastjson2.JSON; import com.alibaba.fa…

LeetCode //C - 119. Pascal‘s Triangle II

119. Pascal’s Triangle II Given an integer rowIndex, return the rowIndexth (0-indexed) row of the Pascal’s triangle. In Pascal’s triangle, each number is the sum of the two numbers directly above it as shown: Example 1: Input: rowIndex 3 Output: …

集中抄表电表是什么?

1.集中抄表电表:简述 集中抄表电表,又称为远程抄表系统,是一种现代化电力计量技术,为提升电力行业的经营效率和客户服务质量。它通过自动化的形式,取代了传统人工抄水表,完成了数据信息实时、精确、高效率…

C# 深拷贝和浅拷贝

文章目录 1.深拷贝2.浅拷贝3.拷贝类4.浅拷贝的实现5.深拷贝实现5.1 浅拷贝对象,对引用类型重新一个个赋值5.2 反射实现5.3 利用XML序列化和反序列化实现 1.深拷贝 拷贝一个对象时,不仅仅把对象的引用进行复制,还把该对象引用的值也一起拷贝。…

Python基于PyQt6制作GUI界面——按钮

示例对应的制作的 ui文件 界面如下所示。 <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0"><class>Form</class><widget class"QWidget" name"Form"><property name"geom…

C#使用开源操作库MiniExcel操作Excel

简介 MiniExcel 简单、高效避免 OOM 的.NET 处理 Excel 查、写、填充数据工具。 目前主流框架大多需要将数据全载入到内存方便操作&#xff0c;但这会导致内存消耗问题&#xff0c;MiniExcel 尝试以 Stream 角度写底层算法逻辑&#xff0c;能让原本 1000 多 MB 占用降低到几 …

2024年【N1叉车司机】考试题及N1叉车司机找解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 N1叉车司机考试题参考答案及N1叉车司机考试试题解析是安全生产模拟考试一点通题库老师及N1叉车司机操作证已考过的学员汇总&#xff0c;相对有效帮助N1叉车司机找解析学员顺利通过考试。 1、【多选题】《特种设备使用…

微服务-系统架构

微服务&#xff1a; 系统架构的演变 单一应用架构 早期的互联网应用架构&#xff0c;大量应用服务 功能 集中在一个包里&#xff0c;把大量的应用打包为一个jar包&#xff0c;部署在一台服务器&#xff0c;例如tomcat上部署Javaweb项目 缺点:耦合度高&#xff0c;一台服务器…

springboot项目中图片上传之后需要重启工程才能看到图片?

需求背景 最近在做一个用户自定义上传头像的小需求&#xff0c;用户上传头像然后需要立马回显。 需求是很常见的、正当的需求。如果不使用到对象存储这类服务&#xff0c;我们把用户头像的图片文件仅存在本地就可以了。我们在开发的过程中为了工程管理方便通常下意识会将图片…

PyTorch安装与配置

前言 参考文档&#xff1a;https://github.com/TingsongYu/PyTorch-Tutorial-2nd 环境配置之Anaconda 解释器——python.exe&#xff0c;是人类与CPU之间的桥梁&#xff0c;需要配置系统环境变量 Anaconda&#xff1a;集成环境&#xff0c;包管理器 Conda 安装 Anaconda&am…

【vs2022】安装copilot和reshaper

直接安装新版vs 17.10 自带集成的copilot支持安装resharper 可以跳过市场里的reshper安装好后依然可以直接使用vs。 resharper 2024.1.2 市场里还是i老版本&#xff1a; copilot 不兼容,这个是之前市场安装的版本 官方建议用vs intall 安装 安裝 GitHub Copilot GitHub.Co…

【CAN】STM32新能源汽车CAN通信实现过程

【CAN】STM32新能源汽车CAN通信实现过程 文章目录 前言一、软件1.PA11、PA12口配置2.PB8、PB9口配置 二、接线图三、硬件原理图四、上位机总结 前言 【电机控制】直流有刷电机、无刷电机汇总——持续更新 使用工具&#xff1a; 1.控制器——STM32F103C8T6 2.仿真器——STLINK …