antdesign表格自定義滾動條樣式

最近使用umi+ant design寫個後臺管理系統，設計稿滾動條樣式挺好看的，

關於滾動條的一些屬性作個記錄，設計稿樣式(由於涉及公司信息，因此數據仍是不要顯示了)

ant design中表格的滾動條樣式

//
:global { //修改框架樣式關鍵字
    //表格頭標題的滾動條設置
    // 爲何設置標題頭滾動條呢，由於ant中表格直接引入在umi中，顯示滾動條，表頭也會顯示
    // 我看了生成後的表格元素，發現它是表頭其實也是個表格，而後取表格的thead部分設置，
    // 表體又是一個表格，而後取tbody設置
    .ant-table-header{
        border-right: #2F2F2F;
        //滾動條總體部分
        &::-webkit-scrollbar {
            width: 6px;//y軸滾動條粗細
            height: 6px;//x軸滾動條粗細
            border-bottom: 1px solid #7B7B7B;
        }
        
        //滾動條裏面的小方塊，能上下左右移動（取決因而垂直滾動條仍是水平滾動條）
        &::-webkit-scrollbar-thumb {
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
            background: #949494;
            margin-bottom: 10px;
        }
        //滾動條的軌道（裏面裝有thumb）滾動槽
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: 0;
            border-radius: 0;
            background: #4D4D4B;//滾動槽背景色
            border-radius: 10px;//滾動條邊框半徑設置
        }
    }
    //表格體的滾動條設置
     .ant-table-body{
            border-right: #2F2F2F;
            //滾動條總體部分
            &::-webkit-scrollbar {
                width: 6px;//y軸滾動條粗細
                height: 6px;//x軸滾動條粗細
                border-bottom: 1px solid #7B7B7B;
            }
            
            //滾動條裏面的小方塊，能上下左右移動（取決因而垂直滾動條仍是水平滾動條）
            &::-webkit-scrollbar-thumb {
                border-radius: 8px;
                -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
                background: #949494;
                margin-bottom: 10px;
            }
            //滾動條的軌道（裏面裝有thumb）滾動槽
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: 0;
                border-radius: 0;
                background: #4D4D4B;//滾動槽背景色
                border-radius: 10px;//滾動條邊框半徑設置
            }
        }
}複製代碼