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

ops/2024/10/15 16:53:20/

新版里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);
}

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


http://www.ppmy.cn/ops/42627.html

相关文章

KubeKey 安装 K8s

官网教程 在 Linux 上以 All-in-One 模式安装 KubeSphere 步骤 1:准备 Linux 机器 若要以 All-in-One 模式进行安装,您仅需参考以下对机器硬件和操作系统的要求准备一台主机。 硬件推荐配置 操作系统最低配置Ubuntu 16.04, 18.04, 20.04, 22.042 核 …

Mac启用三指拖移

1. 简介 在使用mac的用户中大部分都会开启三指拖移功能,它能大大简化选中文字、修改窗口大小、拖动窗口等操作。 什么是三指拖移? 三指拖移是macOS触控板的一种手势功能,允许用户用三根手指在触控板上进行拖动操作,而无需按住触…

Tower在深度学习中的概念,tower没有确切定义

在论文UniTS中,来自Havard的工作。 tower更像是针对一个task的组件 tower这个概念貌似在REC(recommendation)推荐系统中使用较多 deep learning - What is a tower? - Data Science Stack Exchange https://developers.google.com/machin…

欣赏倪诗韵青桐断纹古琴很罕见:万中无一。

欣赏倪诗韵青桐断纹古琴很罕见:万中无一。龙池侧签海门倪诗韵制,带收藏证书此琴断纹优美如江面波光粼粼,为流水蛇腹断,是倪老师作品精品中的精品。细心的朋友可以看出倪老师在这张琴上题字非常小心认真。用一个词来形容——万中无…

go学习笔记-从圣经中抄录的接口值的思考

接口值 接口值,由两个部分组成,一个具体的类型和那个类型的值 下面4个语句中,变量w得到了3个不同的值。( 开始和最后的值是相同的) var w io.Writer w os.Stdout w new(bytes.Buffer) w nil var w io.Writer var…

根据多个坐标经纬度获取到中心点的经纬度,scala语言

文章目录 前言scala 代码 总结 前言 Scala 语言 通过多个经纬度坐标点, 计算出中心点, 这里使用的是 Scala 语言,其他的语言需要自行转换。求出来的并不是原有的点,而是原有点的中心位置的点。 scala 代码 package com.dw.process.midimport java.lang.Double.pa…

Kubernetes(k8s) 实战集群部署Discuz x3.5 k8s使用本地私有仓库镜像 Centos 8.5 安装部署NFS

本文环境可参考: 详细教程 Centos8.5 基于 k8s v1.30.1 部署高可用集群 kubeadm 安装 kubernetes v1.30.1 docker集群搭建 延长证书有效期-CSDN博客 1 集群部署,需要PV,安装NFS #master11,slave12,slave13都安装 yum install nfs-utils rpcbind -y2 …

不靠后端,前端也能搞定接口!

嘿,前端开发达人们!有个超酷的消息要告诉你们:MemFire Cloud来袭啦!这个神奇的东东让你们不用依赖后端小伙伴们,也能妥妥地搞定 API 接口。是不是觉得有点不可思议?但是事实就是这样,让我们一起…