React+Antd修改Table組件滾動(dòng)條樣式的操作代碼
更新時(shí)間：2024年12月16日 10:16:03 作者：苦逼的猿寶
這篇文章主要介紹了React+Antd修改Table組件滾動(dòng)條樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
版本
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);
}效果
到此這篇關(guān)于React+Antd修改Table組件滾動(dòng)條樣式的文章就介紹到這了,更多相關(guān)react antd 滾動(dòng)條樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
在React中使用React.createRef：更優(yōu)雅的DOM引用方式
React提供了多種方式來(lái)引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應(yīng)用,以及它為開(kāi)發(fā)者帶來(lái)的便利,感興趣的朋友一起看看吧2024-01-01
如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫(xiě)redux邏輯的方法，針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴(lài)外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化，官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的，總結(jié)來(lái)看，就是更加的方便簡(jiǎn)單了2022-12-12
React路由跳轉(zhuǎn)的實(shí)現(xiàn)示例
在React中,可以使用多種方法進(jìn)行路由跳轉(zhuǎn),本文主要介紹了React路由跳轉(zhuǎn)的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
react 跳轉(zhuǎn)后路由變了頁(yè)面沒(méi)刷新的解決方案
最近在學(xué)習(xí)React的過(guò)程中遇到了路由跳轉(zhuǎn)后頁(yè)面不刷新的問(wèn)題，本文就詳細(xì)的介紹一下解決方法，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要給大家介紹了react聲明組件有哪幾種方法,各有什么不同,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
react hooks實(shí)現(xiàn)防抖節(jié)流的方法小結(jié)
這篇文章主要介紹了react hooks實(shí)現(xiàn)防抖節(jié)流的幾種方法,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
React使用fullpage.js實(shí)現(xiàn)整屏翻頁(yè)功能
最近筆者在完成一個(gè)移動(dòng)端小項(xiàng)目的過(guò)程中需要實(shí)現(xiàn)整屏翻頁(yè)的效果；調(diào)研完畢之后,最終決定使用pullPage.js實(shí)現(xiàn)此功能,fullPage.js使用起來(lái)比較方便,并且官網(wǎng)上也給了在react項(xiàng)目中使用的demo,本文記錄了這個(gè)第三方庫(kù)的使用過(guò)程,感興趣的朋友可以參考下2023-11-11
React Fiber結(jié)構(gòu)的創(chuàng)建步驟
這篇文章主要介紹了React Fiber結(jié)構(gòu)的創(chuàng)建步驟，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04