vue中设置了scoped无法修改elementUI组件问题

Vue中的scoped问题

1.什么是scoped
在Vue文件中的style标签上有一个特殊的属性,scoped。当一个style标签拥有scoped属性时候,它的css样式只能用于当前的Vue组件,可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性,相当于实现了样式的模块化。

2.在组件中修改第三方组件库样式的其它方法

scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用vue-awesome-swiper实现移动端轮播),需要在局部组件中修改第三方组件库的样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。

  • 在vue组件中不使用scoped属性(还是推荐使用)
  • 在vue组建中使用两个style标签,一个加上scoped属性,一个不加scoped属性,把需要覆盖的css样式写在不加scoped属性的style标签里
  • 建立一个reset.css(基础全局样式)文件,里面写覆盖的css样式,在入口文件main.js 中引入

版权声明:本文为Whoopsina原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。