记一次VUE中使用Element-UI样式失效问题

记一次VUE中使用Element-UI样式失效问题

做练习时发现自己从element-ui上复制下来的样式没有生效，代码如下。

  <el-form-item label="图片">
    <el-upload
      ref="picUpload"
      class="avatar-uploader"
      accept=".png,.jpg"
      action=""
      :show-file-list="false"
      :on-remove="removePic"
      :on-change="choosePic"
      :limit="1"
      :auto-upload="false"
    >
      <img v-if="picFileInfo" :src="picFileInfo.url" class="avatar" />
      <img v-else-if="form.image" :src="form.image" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      <div slot="tip" class="el-upload__tip" style="color:red">
        只能上传png/jpg文件
      </div>
    </el-upload>
  </el-form-item>


<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

效果对比如下：

​ 经过网上查询资料发现是因为在<style>标签中加入了scoped属性，scoped 属性仅对单文件组件（.vue 文件）有效，对于全局的样式（如引入的第三方库的样式），不会受到 scoped 属性的影响。这是因为 Element UI 组件的样式是通过类似于 /deep/ 或者 ::v-deep（Vue 2.x）的选择器来实现的样式穿透，而不是依赖于 CSS 的作用域限定。

​ 在 Vue 2.x 版本中，如果给 <style> 标签添加 scoped 属性，会导致 Element UI 组件中的样式选择器无法穿透到组件内部，从而无法正常应用样式。因此，使用 scoped 属性可能会导致 Element UI 组件的样式失效。

​ 根据上述解决方案进行代码修改

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

结果展示: