vue 添加样式使用scoped属性,样式不起作用问题


出现这种情况的原因

  • 父组件没有使用scoped标识,使用的子组件用了scoped标识,在父组件中设置子组件中的节点的样式
  • 父组件使用了scoped标识,子组件没有使用,父组件中设置子组件样式

出现这种情况的原因

  • 父组件没有使用scoped标识,使用的子组件用了scoped标识,在父组件中设置子组件中的节点的样式
  • 父组件使用了scoped标识,子组件没有使用,父组件中设置子组件样式

所以

  • 如果我们添加了子组件,并且子组件使用scoped标识,那么在父组件中是不能设置子组件中的节点的样式
  • 若父组件有scoped,子组件没有设置,同样,也是不能在父组件中设置子组件的节点样式

若想在父组件中修改子组件的样式,应该怎么办

 

     1.第一种:穿透方法

1
2
3
4
5
<style scoped>
      外层 >>>第三方组件{
           样式
      }
</style>
 

 

     2.第二种:再写一个style,不加scoped

1
2
3
4
5
6
<style>
      /*全局样式*/
</style>
<style scoped>
      /*局部样式*/
</style>
 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM