CSS 修改Element UI组件(第三方组件)默认样式

样式穿透：
在 Vue2 版本中： 如果你是使用的 Stylus 以及 CSS 那么不用考虑直接使用 CSS 所支持的 >>> 来穿透就可以了。
如果说你使用的是 Less 以及 Sass 的话，那么推荐使用 ::v-deep 来实现样式穿透的效果。
如果说你使用的是 Vue3 的话，就需要把 ::v-deep 替换成 :deep() 了

1 修改Input框样式

1.1 例1

将 input 框背景色改为蓝色
修改el-input的样式：

<el-input class="input-area"></el-input>

查看DOM结构：

原本使用 /deep/ 但是可能不兼容 使用 :deep

.input-area {
  :deep(.el-input__inner){
    background-color: blue;
  }
}

1.2 例2

2 修改popover样式

2.1 为什么要在一个新的 style 标签中写弹出框的样式？

因为 popover、tooltip 弹出框的 DOM 元素并不在编写代码的父元素内
比如我们查看 tooltip 的 DOM

方形内，是 tooltip 的 DOM，而圆形区域上面是编写代码的父元素
所以我们要在一个新的 style 标签中写弹出框的样式，而不是紧跟着父元素写弹出框的样式

3 修改 el-checkbox 勾选框

el-checkbox 的原本 DOM 结构

针对 DOM 结构，以下 CSS 思路如下：

• 采用我自己的图标
• 改变背景颜色
• 隐藏原来的图标

.add-shop-container {
    /* 修改 el-checkbox 样式 */
    ::v-deep .is-checked .el-checkbox__inner {
      /* checked 选中 */
      background: url('../assets/images/icon/selected_tag.png'); // 采用我自己的图标
      background-color: rgba(255, 255, 255, 1);   // 改变背景颜色
      background-size: contain;
    }
    ::v-deep .el-checkbox__inner::after {
      /* 隐藏elementui原有对勾图标 */
      display: none;
    }
}

全局文件引入

组件中用到了 el check
定义main.scss ，在第一层页面中引入全局这个css

// main.scss
.pop-file-type {
  .file-type_select {
    .el-checkbox__input {
      display: none;
    }
  }
}

效果：隐藏掉了勾选框