覆盖ElementUi的默认CSS样式

不言

发布于：2020年1月7日

问题背景

可以看到，默认样式尤其是背景色跟我的主题色彩冲突。

一般情况下会想着找到样式修改，试一下。

然后在style里修改下

 <style scoped>
    .el-table td, .el-table tr {
       color: red;
       background: #232121; 
    }
</style>

刷新下页面，并没有卵用，并且在style中找不到自定义的属性

原因分析

一番搜索下，找到了问题所在。是因为我的style加了scoped。

加入scoped就是为了使得样式私有化，不对全局造成污染，因为在浏览器渲染的时候后在组件后加入不重复的data属性，每个样式的权重加重，如果要去修改，需要更高的权重来修改。

因为上面虽然修改样式，但是由于权重关系，生效的依然是elementUI组件的内部样式。

初步解决

知道来原因，先将scoped去除。

 <style>
    .el-table td, .el-table tr {
       color: red;
       background: #232121; 
    }
</style>

刷新下

样式生效了。

遗留问题

下面考虑另外一个问题。

之所以加scoped是为了样式不被扩散到其他页面，作为局部样式存在，去除固然使自定义样式生效了，但是这样就失去原本的意义了。

还有什么办法？

方法也是有的，推荐查看这篇 https://www.cnblogs.com/hyds/p/11349944.html

文中提到了三种方式:

穿透scoped
在含有scoped属性的style标签外再定义一个不含scoped属性的style标签
不使用scoped属性，通过给vue组件的根元素加个id来区分不同组件

1，2违反了scoped属性的意义

2使得代码略显丑陋

最终解决

试了下，使用起来第二种是最简单的，但是这样样式可能会有问题，严格意义来说，3的方法其实跟2差不多，只不过使用了id来限制来生效范围，使得样式不会污染全局。

既然这样，那干嘛不使用1+3的结合，我既保留了scoped，又用id来限制来范围，岂不是美滋滋～

说做就做

给el-table加一个id

 <el-table
         id="wozijide"
......
 <el-pagination
         id="haishiwode"  <!--分页组件也顺道改了-->
......

css编写

<style scoped>
     #wozijide >>> tr{
       color:white;
       background: #232121; 
    }
    /* 表格头样式单独定义 */
    #wozijide >>> th {
        color: burlywood;
        background: black;
    }
    /* 鼠标移上去的时候行样式 */
    #wozijide >>> tbody tr:hover>td { 
    background-color:gray;
    }

    /* 分页组件样式 */
    #haishiwode >>> input, #haishiwode >>> button, #haishiwode >>>li{
        background: #232121; 
    }
</style>