一个关于vue+element-ui打包样式污染的问题

 因为是二次开发得到项目有一些莫名其妙的问题找不到原因，上网搜了很久都是有关避免写的样式污染其他页面  没有我遇到的这种情况

一开始是使用的行内样式，因为行内的权重比较高，但是打包上线之后通过控制台发现这个input的样式是    .el-select>.el-input:width:140px;   这就很恶心

            <el-col :span="12">
              <el-form-item label="类型" prop="wellType">
                <el-select
                  styel="width:220px"
                  v-model="form.wellType"
                  placeholder="选择类型"
                  :filterable="true"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :label="item.name"
                    :value="item.name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

 再后来就想着给他加一个单独的类名再进行样式设置

            <el-col :span="12">
              <el-form-item label="类型" prop="wellType">
                <el-select
                  class="inpp"
                  v-model="form.wellType"
                  placeholder="选择类型"
                  :filterable="true"
                  :clearable="true"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :label="item.name"
                    :value="item.name"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

<style>
.inpp>.el-input__inner{
  width: 220px !important;
}
.inpp>.el-input{
  width: 220px !important;
}
</style>

 因为再控制台看到的需要改变样式的标签为el-input 和 el-input_inner  还有就是前面的自定义类名可以有效的防止样式污染，   因为没有找到污染这个标签的污染源   我怕权重不够  就又给他加了一个 ！important  

之后就是打包上线了   上线之后发现问题已经解决，