使用el-table设置表头颜色后，偶然启用暗黑模式，发现天塌了.....

接到需求后，为了满足原型表头样式要求，我直接使用了下述代码进行实现：

<template>
<el-table
    border
    header-row-class-name="table_header_class"
    :data="tableData.list"
    @selection-change="handleSelectionChange"
    height="100%"
    >
    ....
</el-table>
</template>
<style lang="scss">
::v-deep(.table_header_class th) {
  background-color: #f2f3f5;
  text-align: center;
}
</style>

对于样式的实现我很满意

然而，偶然一次我开启了暗黑模式，结果发现表头的颜色居然并不能随暗黑模式变化，还得结合useDark才能实现table表头颜色的修改,解决方法如下： 1.首先，要先创建一个"@/assets/styles/element-dark.scss"文件

// element-dark.scss 文件
/* 自定义 element 暗黑模式 */
html.dark {

  .el-table {
    .el-table__header-wrapper, .el-table__fixed-header-wrapper {
      th {
        word-break: break-word;
        background-color: transparent !important;
        color: #e1e4e9;
        height: 40px !important;
        font-size: 13px;
      }
    }
  }
}

2.其次，在项目的main文件中导入该样式文件

// main.js 文件
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/assets/styles/element-dark.scss'

3.最后，切换暗黑模式，便就正常了

解决方式参考： 暗黑模式table背景颜色修改_element-plus el-table组件如何设置表头背景色-CSDN博客