美化ant-design vue 組件滾動條樣式

a-modal：

.ant-modal-body {
    &::-webkit-scrollbar {
      width: 6px; /*高寬分別對應橫豎滾動條的尺寸*/
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background: transparent;
    }
  }

a-table：

.ant-table-body,
  .ant-table-header {
    word-break: break-all;
    &::-webkit-scrollbar {
      width: 6px; /*高寬分別對應橫豎滾動條的尺寸*/
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(144, 147, 153, 0.5);
    }
    &::-webkit-scrollbar-track {
      // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 5px;
      background: transparent;
    }
  }

備註：

滾動條的組成：
::-webkit-scrollbar 滾動條整體部分
::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能上下左右移動（取決於是垂直滾動條還是水平滾動條）
::-webkit-scrollbar-track 滾動條的軌道（裏面裝有thumb）
::-webkit-scrollbar-button 滾動條軌道兩端的按鈕，允許通過點擊微調小方塊的位置
::-webkit-scrollbar-track-piece 內層軌道，滾動條中間部分（除去）
::-webkit-scrollbar-corner 邊角，及兩個滾動條的交匯處
::-webkit-resizer 兩個滾動條的交匯處上用於通過拖動調整元素大小的小控件