table组件的滚动条样式，不能被全局的scrollbar伪类样式修改了

[zx-zx22]

Reproduction link

Steps to reproduce

::-webkit-scrollbar {
width: 8px;
height: 8px;
-webkit-appearance: none;
}

::-webkit-scrollbar-track {
background-color: #e1e6e6;
}

::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: #f7fafa;
}

全局修改了滚动条样式，之前table的滚动条样式也会被响应的修改，现在无法修改

What is expected?

期望 table组件的滚动条样式可以被全局的scrollbar伪类修改

What is actually happening?

实际上滚动条样式未被修改，呈现的是浏览器默认的滚动条样式

Environment	Info
antd	5.14.2
React	18.2.0
System	windows
Browser	chrome 最新版

[Wxh16144]

你提供的 codesandbox 地址是无效的，不过我猜测应该是权重不够？试试这样：

[zx-zx22]

奇怪 codesandbox 我可以打开呀
试了 没效果 !important也没有效果

[zx-zx22]

.ant-table-body::-webkit-scrollbar {
width: 8px !important;
height: 8px !important;
-webkit-appearance: none !important;
}

.ant-table-body::-webkit-scrollbar-track {
background-color: var(--body-background) !important;
}

.ant-table-body::-webkit-scrollbar-thumb {
border-radius: 6px !important;
background-color: var(--border-color-base) !important;
}
这样去修改table的滚动条样式也无效

[Wxh16144]

奇怪 codesandbox 我可以打开呀

应该是超限制了默认不会公开

这样去修改table的滚动条样式也无效

我看了一下，如果是虚拟表格的话，滚动条不是浏览器的滚动条是虚拟滚动条，要通过样式去覆盖。

[zx-zx22]

不是虚拟表格，就是 table的 overflow:auto
没升级antd之前 那个滚动条样式是可以被修改的

[zx-zx22]

就这个滚动条 5.13.3版本 都还可以被全局的 scrollbar伪类样式修改

[Wxh16144]

我本地测试没啥问题 mac 14.3 chrome 122 ，你先用 stackblitz 提供一个复现看看～

[zx-zx22]

https://codesandbox.io/p/devbox/confident-panini-forked-ftyqq7?file=%2Fsrc%2FApp.tsx
这个地址可以打开了 全局修改的滚动条样式 table的滚动条样式没生效

[nova1751]

最近chrome121版本更新后scrollbar-width和scrollbar-color成为了标准滚动条样式属性，优先级高于伪元素。

[zx-zx22]

奇怪 我也搜过scroll 没搜出来这两个属性 是antd的css文件吗

[yisumay]

我也遇到了这个问题，请问有解决办法了吗？

[SHingCHong]

最近chrome121版本更新后scrollbar-width和scrollbar-color成为了标准滚动条样式属性，优先级高于伪元素。

原因是因为5.14.2的更新 Table内样式添加了scrollbar-color属性
Notice that scrollbarColor will not work with low version chrome and safari.
最快的解决方式是降级到5.14.1

[nova1751]

奇怪 我也搜过scroll 没搜出来这两个属性 是antd的css文件吗

我只是举个例子。和楼上说的一样，目前这两个属性加一个之前的滚动条伪类选择器就废了，目前除了不用这两个属性也没有发现比较好的解决办法。

[json-q]

最近chrome121版本更新后scrollbar-width和scrollbar-color成为了标准滚动条样式属性，优先级高于伪元素。

原因是因为5.14.2的更新 Table内样式添加了scrollbar-color属性 Notice that scrollbarColor will not work with low version chrome and safari. 最快的解决方式是降级到5.14.1

5.14.1 也不行，检查了一下元素，也有 scroll-color 元素，好像需要回退到5.14.0版本

[nova1751]

@MadCcc 我觉得可以给所有使用暗黑算法的组件添加这样一个CSS属性来适配暗黑模式的滚动条color-scheme，不过我不太清楚怎样的修改方式比较好，能给点建议吗？

[zx-zx22]

• {
  scrollbar-width: auto;
  scrollbar-color: auto;
  } 用这个样式去覆盖antd的样式，滚动条样式就可以继续被伪类修改了

[fandepeng1993]

我开始 发现以为是生产环境上有问题，本地开发上没有出现滚动条显示不了。直到我把本地node-module 重新install 后 发现 是antd的版本导致的（5.11.1 --- >5.15.0）。正如楼上所说版本影响

[MadCcc]

• {
  scrollbar-width: auto;
  scrollbar-color: auto;
  } 用这个样式去覆盖antd的样式，滚动条样式就可以继续被伪类修改了

考虑到 antd 本身也需要对暗黑模式下的滚动条做一些定制化处理，有遇到伪类无法覆盖的可以采用这个解决办法，或者直接使用 scrollbar-color 进行覆盖。
这个 Issue 先关闭了，有其他问题可以新开 issue 提出。

[nannan0109]

• {
  scrollbar-width: auto;
  scrollbar-color: auto;
  } 用这个样式去覆盖antd的样式，滚动条样式就可以继续被伪类修改了

考虑到 antd 本身也需要对暗黑模式下的滚动条做一些定制化处理，有遇到伪类无法覆盖的可以采用这个解决办法，或者直接使用 scrollbar-color 进行覆盖。 这个 Issue 先关闭了，有其他问题可以新开 issue 提出。

我用这个方式去改，没有改成功，表格的滚动条样式还是没有被伪类修改成功