前端踩坑（三）(vue)修改样式无效

最新推荐文章于 2024-06-14 15:45:56 发布

TUTsmile

最新推荐文章于 2024-06-14 15:45:56 发布

阅读量2.6k

点赞数

分类专栏：踩坑排错 vue 文章标签： element 修改样式修改样式无效 class无效 vue无法修改class vue无法修改style

本文链接：https://blog.csdn.net/TUTsmile/article/details/100141779

版权

在Vue项目中，当使用scoped属性防止样式污染时，如何修改第三方组件的样式成为一个挑战。本文介绍如何利用>>>或/deep/操作符来穿透scoped，实现对第三方组件样式的局部修改，同时保持组件间的样式隔离。

摘要由CSDN通过智能技术生成

在这里插入图片描述

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。
有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)

passenger-search-form是我赋予整个表单的class，取什么名字都可以。

<style scoped>
/* 使得宽度可以自适应 */
.passenger-search-form >>> .el-form-item {
   
  width: 100% ;
}
.passenger-search-form >>> .el-form-item__label

关注

专栏目录