浏览器检查元素后发现，该内联样式虽被渲染，但被组件自身的 CSS 类（如 .el-table__header）中的规则覆盖。

二、根本原因分析

样式优先级冲突：Element 组件库通过 SCSS 编译生成的 CSS 具有较高的特异性（specificity），其类选择器的优先级高于内联样式中的普通属性。

样式对象格式错误：部分开发者误将字符串或非 camelCase 格式用于 JS 对象键名，例如使用 "background color" 而非 backgroundColor。

scoped CSS 穿透失效：当使用 <style scoped> 时，Vue 会为组件添加唯一属性选择器（如 data-v-f3f439），导致无法影响子组件内部结构。

DOM 结构层级误解：header-row-style 实际作用于 <tr> 行元素，而背景色通常需应用到每个 <th> 单元格才可见。

解决方法

<el-table

       ref="dataTableRef"

       v-loading="loading"

       :data="msgList"

       highlight-current-row

       header-cell-class-name="thRow"

CSS样式

:deep(.thRow){background-color: #7CB342!important;color:#fff;}