首页 > 其他 > 详细

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

时间:2018-10-21 22:50:12      阅读:38      评论:0      收藏:0      [点我收藏+]

标签:lang   tro   att   orm   宋体   ttr   符号   Language   避免   

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题。但是想要修改还是有方法的:

1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式。

2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法  vue-loader 写法如下:

<style scoped>
.a >>> .b { /* ... */ }
</style>

某些预处理器(如Sass)可能无法>>>正确解析。在这些情况下,您可以使用/deep/组合器 - 它是别名,>>>并且完全相同。

<style scoped lang="scss">
  .form {
    background-color: #fff;
    /deep/ .list{
      font-size: 18px;
    }
  }
</style>
sass注意要用 /deep/ ,而无法使用 >>> 这个符号

 

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

标签:lang   tro   att   orm   宋体   ttr   符号   Language   避免   

原文:https://www.cnblogs.com/wangmaoling/p/9827428.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号