element Plus样式修改

修改思路

在浏览器选择对应标签打开控制台，查找对应class样式，写在一个.scss文件中在main.ts文件element-plus的样式之后导入。如果修改的是背景边框之类的，大部分是选择标签的父标签。

组件class样式名称

.el-input__wrapper 修改日期选择器输入框的背景。__

.el-date-range-picker__content 修改日期选择器弹出框的背景。

.el-popper.is-light 修改日期选择器弹出框的边框

*.*in-range *.*el-date-table-cell 修改日期选择器弹出框的背景

.el-date-table td*.start-date* .el-date-table-cell__text 修改日期选择器弹出框的第一个元素的字体样式

.el-select .el-select__wrapper 修改选择框的背景

.el-select__popper .el-scrollbar__view 修改选择框弹出的背景

…等。

表格样式设置

在表格外包裹一层div 样式为table

.table {
  width: inherit;
  // height: calc(100% - 60px);
  height: 400px;

  :deep(.el-table) {
    border-radius: 4px 4px 0px 0px;
    border-color: transparent;
  }

  //字体颜色
  :deep(.el-table .cell) {
    color: white;
    padding: 0 5px;
  }

  // 表头颜色
  :deep(.el-table th.el-table__cell) {
    background: transparent;
  }

  :deep(.el-table thead) {
    border-right: 1px solid #48a4ff;
  }

  :deep(.el-table thead > tr) {
    background: linear-gradient(180deg, rgba(26, 147, 230, 0.5) 0%, rgba(26, 147, 230, 0) 100%);
  }

  //背景色透明
  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  :deep(.el-table tr) {
    background-color: transparent;
  }

  :deep(.el-table--enable-row-transition .el-table__body td, .el-table .cell) {
    background-color: transparent;
    border-bottom: 1px solid #1b4771;
  }

  //居中(head-cell-style & cell-style中的text-algin设置无效)
  :deep(.el-table th) {
    text-align: center;
  }

  :deep(.el-table td) {
    text-align: center;
    cursor: pointer;
  }

  //去除网格线
  :deep(.el-table__row > td) {
    border: none;
  }

  :deep(.el-table th.is-leaf) {
    border: none;
  }

  :deep(.el-table::before) {
    height: 0;
  }

  :deep(.el-table__inner-wrapper::before) {
    display: none;
  }
}

// 表格样式

内部修改样式

通过:deep()修改指定样式

//背景色设置为透明
:deep(.el-input__wrapper) {
  background-color: rgba(0, 0, 0, 0);
}

分页样式修改

.el-pagination {
    // 分页背景颜色
  --el-pagination-bg-color: transparent;
  // 分页字体颜色
  --el-pagination-text-color: #fff;
  // 分页切换按钮禁用时的字体样式
  --el-pagination-button-disabled-color: #ccc;
    // 分页切换按钮禁用时的背景样式
  --el-pagination-button-disabled-bg-color: retransparentd;
  // 分页字体的颜色
  --el-text-color-primary: #fff;
  // 选中页当前的颜色
  --el-color-primary:#0865f9;
  // 总条数字体的颜色
  --el-text-color-regular: #fff;
}

用到的案例

//输入框背景色设置为透明
:deep(.el-input__wrapper) {
  background-color: rgba(0, 0, 0, 0);
}

没有学不会的技术，加油！
希望能帮到你。。。