最近用vue脚手架做个项目,由于用element框架,有些样式不是自己想要的,就要改内部样式,而我又用了scoped.
何为scoped?
在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签拥有scoped属性时,它的CSS样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped,相当于实现了样式的模块化。

更改button样式又不想污染全局就要在元素前加当前外层元素

复选框改背景颜色,首先去浏览器按下f12审查元素,找到该元素的class名或id名,复制,由于我用了scoped,无法直接更改样式,需要特殊的方式穿透scoped
<stylescoped> 外层 >>> 第三方组件 {
样式
}</style>

这样就可以了。
网友评论