element 组件原生样式的修改el-button el-pagination el-select el-table el-timepicker

el-button

el-button 原生样式

//button 修改
::v-deep .el-button--primary {
    color: #0193d2 !important;
    background: rgba(0, 50, 75, 0.24) !important;
    border-color: #0073a5 !important;
    &:hover {
      color: #00b2ff!important;
      background: rgba(0, 109, 159, 0.24) !important;
      border-color: #0073a5;
    }
    &:active {
      color: #00b2ff;
      background: rgba(0, 176, 251, 0.24) !important;
      border-color: #0073a5;
    }
  }

默认

hover

active

el-pagination

注意 一定要在行内加 popper - class 详情可以看这篇博客 https://www.freesion.com/article/23331303300/

::v-deep .select_bottom {
    border: 1px solid red !important;
    ::v-deep .el-select-dropdown {
      background: red !important;
    }
    ::v-deep .el-select-dropdown__item.selected {
      color: red;
    }
  }  

  //pagination 修改
::v-deep .el-pagination__total {
    color: #c7e5ff;
  }
  //中间数字样式
  ::v-deep .el-pager li {
    background: #172f48;
    color: #adb3b7;
  }
  ::v-deep .el-pager li:hover {
    background: #0b1523;
    color: #adb3b7;
  }
  //二个小耳朵样式
  ::v-deep .el-pagination .btn-prev  {
    background: #172f48;
    color: #adb3b7;
  }
  ::v-deep .el-pagination .btn-next {
    background: #172f48;
    color: #adb3b7;
  }
  ::v-deep button[disabled="disabled"] {
    background: #172f48;
  }
  //前往 页 的样式
  ::v-deep .el-pagination__jump {
    color: #adb3b7;
  }
还有的在index.html中修改
 .select_bottom {
            border: 1px solid #152c44 !important;
            background-color: #131a22 !important;
        }
        
        .select_bottom .el-select-dropdown__item {
            font-size: 12px;
            color: #adb3b7 !important;
            background: transparent !important;
        }
        
        .select_bottom .popper__arrow,
        .popper__arrow::after {
            display: none !important;
        }
        
        .select_bottom {
            margin-top: 0 !important;
            min-width: 102px !important;
        }
        
        .select_bottom .el-select-dropdown__item:hover {
            background: rgb(60, 64, 70) !important;
        }

el-select

//select 样式
//输入框的长度
::v-deep .el-input--suffix .el-input__inner {
    padding-right: 0px;
  }
  //设置输入框的背景色 字体颜色 边框属性
  ::v-deep .el-input__inner {
    background: #172f48;
    color: #d0deee !important;
    border: 1px solid rgb(73, 86, 112);
  }
  // label
  ::v-deep .el-form-item__label {
    color: #c7e5ff;
  }
  // 下拉hover
  ::v-deep .el-input--suffix .el-input__inner:hover {
    color: rgba(19, 110, 218, 1);
    border-color: rgba(19, 110, 218, 1);
  }
  
  
  // 下拉框背景颜色和边框
  ::v-deep .el-select-dropdown {
    background: #121e2d;
    border: 1px solid #607792;
  }
  //下拉框字体 背景颜色
  ::v-deep .el-select-dropdown__item {
    font-size: 12px;
    color: #fff;
    background: transparent ;
  }
  //设置输入框与下拉框的距离为0
  ::v-deep .el-popper[x-placement^="bottom"] {
    margin-top: 0;
    margin-left: -3px;
  }
  // 将下拉框的小箭头去掉
  ::v-deep .el-popper .popper__arrow,
  ::v-deep .el-popper .popper__arrow::after {
    display: none;
  }
  ::v-deep .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
    background-color: transparent;
   }
  //鼠标经过的悬浮色
  ::v-deep .el-select-dropdown__item:hover {
    background: rgba(19, 110, 218, 1);
  }
 

el-table

::v-deep .el-table {
    background: transparent;
  }
  //odd even 的颜色
  ::v-deep .el-table__row.odd {
    background: rgba(0, 10, 16, 0.6) !important;
    color: #d0deee;
  }
  ::v-deep .el-table__row.even {
    background: rgba(49, 59, 65, 0.6) !important;
    color: #d0deee;
  }
  // 最外层边框
  .el-table {
    border: 1px solid rgb(73, 86, 112);
  }
  // 表格内边框
  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
    border: none;
  }
  //表格最外层底部边框
  ::v-deep .customer-table::before {
    width: 0;
  }
  // hover 的颜色
  ::v-deep .el-table__body tr:hover > td {
    background-color: rgba(50, 53, 13, 0.6) !important;
    color: rgb(209, 188, 64);
  }

在el-table行内加上
:header-cell-style=“headerStyle” 改变header的样式
:row-class-name=“tableRowClassName” 改变奇偶行的样式

  computed: {
    // 表头样式
    headerStyle() {
      return {
        color: "#c7e5ff",
        fontSize: "18px",
        border: "none",
        background: "#000a10 !important",
      };
    },
  },

在methods
 tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "even";
      } else {
        return "odd";
      }
    },

el-timepicker

行内加 popper-class=“date-style”
在index.html 写样式

/* time 样式 */
.date-style.el-picker-panel {
    /* 当前面板的月份字体颜色 */
  color: #fff; 
  /* 面板整体颜色 */
  background: #172f48;
  /* 面板整体轮廓 */
  border: 1px solid #607792;
  
}
/* 星期下方边框颜色 */
.date-style .el-date-table th{
    border-bottom: 1px solid #607792;
}
/* 二个选择器中间边框颜色 */
.date-style .el-picker-panel__content{
    border-right: 1px solid #607792 !important;
}
/* 按钮颜色 */
.date-style .el-picker-panel__icon-btn{
    color: #fff;
}
/* 年月颜色 */
.date-style .el-date-range-picker__header{
    
    color: #ccc !important;
}
/* 设置星期的颜色 */
.date-style .el-date-table th{
    color: #ccc;
}
/* 去掉三角 */
.date-style .popper__arrow {
  display: none !important;
}
/* 选中的时间条颜色 */
.date-style .el-date-table td.in-range div,.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div{
    background-color: rgb(16, 26, 34);
}
.date-style .available:hover{
    background-color: rgb(16, 26, 34);
    color:#ccc !important;
}
.date-style .prev-month:hover{
    background-color: rgb(16, 26, 34);
    color:#ccc !important;
}
.date-style .el-date-table td.end-date span, .el-date-table td.start-date span {
    
background-color:#172f48;
}

/* 第一个日期的样式 */
.date-style .el-date-table td.end-date span, .el-date-table td.start-date span{
   background-color: #172f48 !important;
}
/* 今天的日期样式 */
.date-style .el-date-table td.today span{
    color: #fff;
}

// time input颜色
::v-deep .el-range-input {
    background: #172f48 !important;
    color: #adb3b7;
  
  }
  // 至的样式
  ::v-deep .el-range-separator {
    color: #adb3b7;
    padding: 0;
  }
  ::v-deep .el-range__close-icon {
    color: #adb3b7;
  }
  ::v-deep .el-range-editor.el-input__inner:hover{
    border: 1px solid rgba(19, 110, 218, 1);
  }