vue修改组件样式

最新推荐文章于 2025-03-20 10:42:24 发布

Frilled Lizard

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量912

点赞数 8

文章标签： vue.js 前端 javascript 开发语言 js ecmascript 前端框架

本文链接：https://blog.youkuaiyun.com/Zing_ing/article/details/135439611

版权

一个组件需要在很多地方使用，但是其中某个子组件的css需要改变，可以使用deep更改组件中的css，需要加上scoped，来进行隔离，最外层的标签可以直接进行修改。
vue2.0

<style scoped>
.play-list{
  /deep/ .section-content{
    width: 80%;
    margin-left: 160px;
  }
  height: 100px;
}
</style>

<style scoped>
.play-list{
  ::v-deep(.section-content){
    width: 80%;
    margin-left: 160px;
  }
   height: 100px;
}
</style>

当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。