Vue中使用样式穿透无效解决办法

Vue中使用样式穿透无效解决办法

在Vue项目中经常需要使用到组件库,遇到需要修改组件库组件的样式时通常会使用样式穿透,但是有时候使用样式穿透会失效(比如修改页面中子组件里的组件库组件样式),又不知道如何调试解决,这里分享一下总结的方法

  1. 先打开控制台看看你写的样式穿透编译后变成什么
    Vue中使用样式穿透无效解决办法_第1张图片
    打开控制台后Ctrl+F打开搜索,搜索你写的样式,可以看到编译后前面加上了一个id,这个id是Vue的scoped为了隔离样式生成的一个唯一id,这个id只会显示在当前组件元素上,不会显示在子组件的元素上
  2. 接着搜索这个id,可以看到哪些元素上有,这下你就可以知道为什么写的样式穿透定位不到你需要修改的元素上了,多半是因为id的位置导致的
    Vue中使用样式穿透无效解决办法_第2张图片

你可能感兴趣的:(vue.js,javascript,前端)