全局修改element-ui 表头的样式

今天遇到了一个需求，在使用elment-ui完成表单后，老大说表头的颜色能不能整一个其他色，这个有点区分不开，于是需求就来了

思路

首先项目中使用到table组件的地方数不胜数，一个一个加，算了你还是打死我吧，于是就到另一种方法，全局修改样式，想到了两种方案：

        1.单独一页面不添加scope，进行全局样式更改，这是一个方法但是想到了，一个问题，后续更改样式的人找不到咋办，所以这个先丢一边

        2.在main.js中全局注册一个css文件！可行，说干就干

在src/style/中创建文件，代码一气呵成，运行 。。。。。。。。不好使。。。。

我的思路没问题啊，然后再去网页中看看elment-ui的table叫啥名字，由于我只需要改表头，所以我找到了他的thead，他的class叫has-gutter，里面样式也生效了，为啥不行呢，要不，在提升一下权重，突然就看到了，他下面有一个el-table th， 所以试试也问题不大，ok，成了

实现代码

//main.js中引入

import '@/styles/index.scss' // global css  

//index.scss

/*修改所以elment ui table thead style*/
.el-table th {
  
  background: rgb(245, 247, 250) !important;

}

这样不仅可以修改表头而是所有的样式都可以在这个里面修改，而且也方便维护，下次再说换个色，我就可以直接改这个background的值了，但是要小心哦，牵一发而动全身

提问

为啥使用thead的 has-gutter  会没有效果呢，希望有大神解答疑问，我在去研究研究看看