项目中如何修改element-ui的默认样式

前言

vue中我们经常会使用一些第三方的组件库，可以达到快速搭建项目界面布局的效果，无非就是用什么组件库的问题。
但是，不管我们使用element ui、vant或是别的什么组件库，修改样式是必不可少的一个工作。

修改element-ui的默认样式

1、去除scoped

scoped作用：vue每个文件的样式部分都会有个scoped属性，该属性限制样式只在当前文件所在的作用域生效，而不会影响其他地方。
scoped的实现原理：vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

转译后：

<template>
  <div class="example">hi</div>
</template>

<style scoped>
.example[data-v-5558831a] {
  color: red;
}
</style>

即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。

2、新增一个style标签

在原有文件的样式标签里嵌套一个不带scoped的style标签，来写我们需要修改的组件库的样式。
不要加scope，否则无效.
如果写在有scoped属性的style标签里：覆盖的样式不会生效！
缺点：多重style会让人感觉代码冗余。
建议：在获取到的样式里加上能限制范围的父层选择器，不然就变成全局样式了。

<style lang="scss" scoped>

.... //本地样式

</style>

<style>   
//新建全局样式
.ruzhu-mess .el-form-item__label{
    font-size:16px!important;
  }
  
.zhuanye-mess .el-form-item__label,.zhuanye-mess .color-t{
    font-size:16px!important;
    color:#606266;
  }
</style>

3、新建全局样式表

在 vue 项目中，可以创建一个全局样式表，如global.css，并将该文件引入到main.js中，可以覆盖 UI 组件中的样式。
但是有一个缺点，就是整个项目中该类型的组件都会被渲染。

4、深度选择器/deep/

/deep/选择器可以在不影响全局的情况下直接穿透scoped，直接去修改默认样式。
使用/deep/选择器时，为保证语法正确需在最外层包裹父元素，否则虽可使用但是会造成语法错误。

<template>
    <div id="test">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
        </el-table>
    </div>
</template>


<style scoped>
#test /deep/.el-table thead tr th{
    background:#f00;
}
</style>

五、使用>>>穿透

使用该方式时，需要在style标签中声明类似于 less，scss等预处理语言

<style lang="scss" scoped>
.create-header >>> .el-tabs__header {
  margin: unset;
}
</style>

使用"sass"或"less"选择器之类的预处理器若无法正确解析 >>>，这种情况下你可以使用/deep/ 或 ::v-deep 操作符代替：

<style lang="less" scoped>
.message /deep/ .el-checkbox__label {
  color: #fff;
}
</style>

如果有些样式为行内式，权重比较高，可以选择使用!important