快捷導(dǎo)航

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