5种办法修改UI框架的局部样式不影响全局

• 1.在去掉scoped的情况下，在要改的el组件外加一个自己的类名包裹一下，就不会影响全局

.loginform { 
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form--label-top .el-form-item__label {
      padding: 0;
    }
  }

• 2.保留scoped的情况下，使用 ::v-deep 来选择以后进行修改

<style scoped>
 ::v-deep .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

• 3.保留scoped情况下，使用 /deep/ 深度选择器,通过使用 box 的class类，找到下面组件内的class类，中间必须得使用 /deep/ 才能找到下面的class类

.box  /deep/ .xxxxx组件样式类 {
    color: red;
 }

• 4.保留 scoped情况下，使用 >>> 选择器，通过使用 box的class类，找到下面组件内的class类，中间必须得使用 >>> 才能找到下面的class类。

.box >>> .xxxxx组件样式类 {
    color: red;
 }

• 5.以上方法在某些情况下解决不了问题，例如select 组件，分页器里面的每页数量选择器，modal框等都不能解决；原因是这些组件直接挂载到了body上，通过上层组件无法选择到，这个时候又不能影响全局样式的话，该怎么办呢，在select组件中，提供了一个popper-class属性，在modal对话框（ant-design)也提供了对应的属性，用来定义下拉框的内容（估计就是解决这种下拉框生成在别处的问题吧）所以我们可以给我们的select组件加上这个属性，就在这个类下修改样式啦。

<el-select  v-model="registerInfo.site" placeholder="FOC" popper-class='fromselect'></el-select>
.fromselect {
  .el-select-dropdown {
  }
  .el-select-dropdown__item {
     background-color: #333A46;
     color: #CCC;
  }
}