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 滾動條樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

原生+React實現(xiàn)懶加載(無限滾動)列表方式
這篇文章主要介紹了原生+React實現(xiàn)懶加載(無限滾動)列表方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
React Native 環(huán)境搭建的教程
本篇文章主要介紹了React Native 環(huán)境搭建的教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
React中使用Vditor自定義圖片詳解
這篇文章主要介紹了React中使用Vditor自定義圖片詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
React報錯Type '() => JSX.Element[]&apos
這篇文章主要為大家介紹了React報錯Type '() => JSX.Element[]' is not assignable to type FunctionComponent解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-12-12
React Native使用fetch實現(xiàn)圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
通過React-Native實現(xiàn)自定義橫向滑動進度條的 ScrollView組件
開發(fā)一個首頁擺放菜單入口的ScrollView可滑動組件,允許自定義橫向滑動進度條,且內(nèi)部渲染的菜單內(nèi)容支持自定義展示的行數(shù)和列數(shù),在內(nèi)容超出屏幕后,渲染順序為縱向由上至下依次排列,對React Native橫向滑動進度條相關知識感興趣的朋友一起看看吧
2024-02-02
React useState的錯誤用法避坑詳解
這篇文章主要為大家介紹了React useState的錯誤用法避坑詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
react實現(xiàn)點擊選中的li高亮的示例代碼
本篇文章主要介紹了react實現(xiàn)選中的li高亮的示例代碼，頁面上有很多個li，要實現(xiàn)點擊到哪個就哪個高亮。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
React項目中decorators裝飾器報錯問題解決方案
這篇文章主要介紹了React項目中decorators裝飾器報錯，本文給大家分享問題所在原因及解決方案，通過圖文實例相結合給大家介紹的非常詳細,需要的朋友可以參考下
2023-01-01
react native 獲取地理位置的方法示例
這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08