element UI 、iview等插件修改样式不污染全局环境

第三方UI插件可以帮我们大大提高开发效率，尤其是组件绑定了很多事件，方便我们使用。但是样式可能会不适合，所以就需要做出修改
方式一：
修改第三方插件首先要去掉scoped,否则修改样式不生效，但是会出现一个问题，去掉scoped就代表该样式是全局的，修改的插件样式会影响全局，怎么办呢，我们在插件样式的外面定义一个父盒子包裹一下就可以啦，既能修改样式，又不会污染全局环境。
例如：

  .loginform {
    height: 300px;
    box-sizing: border-box;
    padding:10px 60px 0;
    text-align: left;
    font-weight: 700;
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form--label-top .el-form-item__label {
      padding: 0;
    }
   }

我们将.el-form-item等第三方插件的样式，用父盒子.loginform
包裹起来就可以啦，这时，当要修改的插件样式超级多时，就显示出来less的好处啦，我们可以使用内嵌的方式，将插件样式包裹起来。

方式二：
使用 /deep/

  /*
  修改样式
  通过使用 box 的class类，找到下面组件内的class类，中间必须得使用 /deep/ 才能找到下面的class类。
  */
  .box  /deep/ .xxxxx组件样式类 {
    color: red;
  }

方式三：
使用>>>

  /*
  修改样式
  通过使用 box的class类，找到下面组件内的class类，中间必须得使用 >>> 才能找到下面的class类。
  */
  .box >>> .xxxxx组件样式类 {
    color: red;
  }

后两种方法，不需要去掉scoped,所以推荐使用

当使用element ui 的select 组件时出现不能修改组件样式的问题。
当在from表单中使用select组件时，我们发现使用父元素包裹修改插件元素并不起作用，这是为什么呢，因为在from中，select组件的下拉框生成并不在此表单中，而是在与app同级的div下，这样，我们用父元素包裹写样式肯定不会生效，因为不在该父元素下生成的
那怎么办呢？ 一定要污染全局环境么？
其实不用，在select组件中，提供了一个popper-class属性，用来定义下拉框的内容（估计就是解决这种下拉框生成在别处的问题吧）所以我们可以给我们的select组件加上这个属性，就在这个类下修改样式啦。

<el-select  v-model="registerInfo.site" placeholder="FOC" popper-class='fromselect'></el-select>

.fromselect {
  background-color: #333A46;
  border: 1px solid #333A46;
  border-radius: 5px;
  .el-select-dropdown {
  }
  .el-select-dropdown__item {
     background-color: #333A46;
     color: #CCC;
  }
 }

就可以不污染全局环境了，注意的是.el-select-dropdown与.fromselect是同级的，所以在 .el-select-dropdown 中定义样式是无效的。