vue中修改第三方组件的样式不生效

问题

在使用element-ui时,有时候想要修改组件内的样式,但不成功,例如

<div class="test">
    <el-button>按钮</el-button>
</div>
<style lang="less" scoped>
.test{
  .el-button span{
    background:red;
  }
}
</style>

以上对.el-button span的样式不生效

问题的原因

想要找到解决方案,我们先来看看不生效的原因。
1)首先,scoped是如何实现局部样式的?
查看vu-loader文档,根据文档可以知道,当 <style> 标签有 scoped 属性时,会对组件内的元素加上一个类似于data-v-f3f3eg9的独特标签,组件内的样式只会对带有这个标签的dom元素生效,因此加上scoped后,组件内的样式不会影响组件外。
2)那scoped为什么对第三方子组件内的dom元素不生效?
文档中提到

仔细阅读这句话,也就是说采用scoped后,对组件A内采用的子组件,只会对其根元素加上组件A的独特标签,因此对子组件的根元素改变样式能生效,而对非根元素是不生效的。因此上面的例子如果改为对根元素.el-button修改样式,就会生效

<style lang="less" scoped>
.test{
  .el-button{
    background:red;
  }
}
</style>

可以看下具体的dom元素,如图

上图中data-v-5752faac是当前组件test的独特标签(其他是父元素带上的,这里忽略),可以看到子组件el-button的根元素带上了此标签,而非根元素span没带上,因此对span的修改是不生效的,此时如果手动在span元素上加上data-v-5752faac,会发现样式生效
3)不仅限于第三方组件
从上面的分析来看,其实不仅限于第三方组件,任何采用到的子组件,只要是想修改子组件的非根元素都是不生效的

解决方案

  • 【方案一】加上一个非scoped样式
    根据文档可知,vue可以混用本地和全局样式,因此对子组件的非根元素样式修改,可以单独放在一个非 scoped 样式中
<style>
.test{
  .el-button span{
    background:red;
  }
}
</style>

<style scoped>
/* 本地样式 */
</style>
  • 【方案二】采用/deep/
    加上/deep/,组件的样式可以渗透到子组件相应的元素上
<style lang="less" scoped>
.test{
  /deep/ .el-button span{
    background:red;
  }
}
</style>

参考文档
vu-loader文档

posted @ 2019-10-08 20:15  小丸子的城堡  阅读(9192)  评论(2编辑  收藏  举报