大屏项目_修改默认滚动条及组件默认样式(6)

1_修改滚动条默认样式

    <div className={styles.distrubuteList}>
       <Distrubute></Distrubute>
    </div>
    
     .distrubuteList {
        position: absolute;
        top: 82px;
        height: 290px;
        padding-right: 16px;
        padding-left: 19px;
        overflow: auto;
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
          width: 6px;
          height: 0px;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        &::-webkit-scrollbar-track {
          border-radius: 10px;
          box-shadow: inset 0 0 6px transparent;
        }
        /*定义滑块 内阴影+圆角*/
        &::-webkit-scrollbar-thumb {
          border: 1px solid #297fcb;
          border-radius: 3px;
          box-shadow: inset 0 0 6px rgba(27, 87, 144, 0.3);
        }
      }

2_修改select默认样式

    .ant-select-dropdown {
      background: rgba(109, 185, 249, 0.2);
    }
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
      color: #fff;
      background: rgba(109, 185, 249, 0.6);
    }
    .ant-select-item {
      color: #fff;
    }
    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
      background: rgba(109, 185, 249, 0.6);
    }
    
    // 这里是取消地图左下角的图标
    .amap-logo {
      display: none !important;
    }
    

遇到的坑：在修改select下拉选择框时，无法选中样式，后通过api将下拉框强制展开，修改样式