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

「爱情、让人受尽委屈。」 2022-05-17 10:06 231阅读 0赞

第三方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` 中定义样式是无效的。