element-ui el-table 样式覆盖

1,932 阅读1分钟
// 暗黑模式作用域
.darkTheme{

// 列表
.el-table {
    background: transparent !important;
    color: #fff;
    // 单数行
    tr:nth-child(odd) {
        background: #021132;
    }
    // 偶数行
    tr:nth-child(even) {
        background: #021132;
    }
    //间隔线条
    th.is-leaf,
    td {
        border-bottom: 1px solid rgba($color: #0CA8E3, $alpha: 0.3);
    }

    &::before {
        background: #000;
    }

    tr th{
        color: #fff;
        background: rgba($color: #023053, $alpha: 0.7);
    }

}

//覆盖悬浮效果
.el-table__body tr.hover-row >td{
  background: rgba($color: #023053, $alpha: 0.3) !important;
}

//其他表格的覆盖效果 我也不知道为啥还不一样
.el-table__body tr:hover > td{
  background: rgba($color: #023053, $alpha: 0.3) !important;
}

//去左下角白线
    .el-table__fixed::before{
        background: rgba($color: #000000, $alpha: 0) !important;
    }

// 更改大背景颜色
.back_f3f6fa {
  background-color: #021133 !important;
}

//内阴影边框
  .darkBorderStyle {
    border: 1px solid #0CA8E3;
    box-shadow: inset 0px 0px 14px 2px #0CA8E3;
    background-color: #021132;
    color: #fff;
  }

  //只有内阴影
    .darkBorderStyleOnlyBorder {
      border: 1px solid #0CA8E3;
    }

//字体hover
.el-link{
    color: #fff;
}
}

效果前后对比: