修改antdv3组件默认样式

1.修改antdv3组件默认样式

方法一：在组件外写一个div，修改这个div下组件的样式就不会更改全局的样式了；

方法二：style标签添加scoped，给每个样式加上::v-deep()；

方法三：如果方法一和方法二不生效，只能使出秘密武器。设置组件的getContainer属性（有的组件是getPopupContainer），我们将原本渲染在#app外部的节点，手动挂载到了#app内部，之后再通过第二条的规则去设置就可以啦~

比如，修改modal的header部分的背景颜色，试了方法一和方法二都不生效。需要使用方法三，先通过挂载元素，再css穿透::v-deep(.ant-modal-body){} 修改样式。

//:getContainer="() => $refs.globalModal"


::v-deep(.ant-modal-header){
  background: rgb(24, 27, 34) ;
  border-bottom: 1px solid rgb(54, 61, 77);
}

2.修改antdv3鼠标悬浮表格某一行改变颜色

.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,
  .ant-table-row-hover,
  .ant-table-row-hover > td {
    background-color: rgb(37, 45, 59) !important;
    color: #ffffff;
  }

  .ant-table-fixed .ant-table-row-hover,
  .ant-table-row-hover > td {
    background-color: rgb(37, 45, 59) !important;
    color: #ffffff;
  }

3. 修改antdv3分页下拉框默认样式

.ant-pagination.mini .ant-pagination-options-quick-jumper {
    color: #ffffff;
    input {
      background-color: rgb(31, 36, 44);
      color: #ffffff;
    }
  }
  .ant-pagination.mini .ant-pagination-item,
  .ant-pagination.mini .ant-pagination-prev,
  .ant-pagination.mini .ant-pagination-next {
    background-color: rgb(31, 36, 44) !important;
    color: #ffffff !important;
  }
  .ant-pagination.mini .ant-pagination-item-active a {
    color: #ffffff !important;
    background-color: #1890ff !important;
  }
  .ant-pagination.mini .ant-pagination-total-text {
    color: #ffffff;
  }
  .ant-pagination.mini .ant-pagination-item a {
    color: #ffffff;
  }
  .ant-select-dropdown {
    background-color: rgb(46, 51, 59) !important;
    color: #ffffff !important;
  }
  .ant-select-arrow {
    color: #fff;
  }

  .ant-select-selector {
    height: 24px;
    border-radius: 4px;
    background-color: transparent;
  }

  .ant-select-dropdown {
    background-color: transparent;

    .ant-select-item {
      color: #fff;

      &:hover {
        background-color: rgb(31, 36, 44);
      }
    }

    .ant-select-item-option-active {
      background-color: rgb(46, 51, 59);
    }

    .ant-select-item-option-selected {
      background-color: rgb(46, 51, 59);
    }
  }