自定义组件中使用深度选择器失效原因,以及解决办法!!!

场景:我把u-tabbar 自己封装成了自定义组件,然后我想修改tabar的高度,我用深度选择器怎么都不生效,然后我打开检查元素发现,我想修改的目标元素生成的scopedId和我深度选择器生成的scopedId数值不一样

当自己封装的自定义组件想使用深度选择器修改组件库组件样式,就会不生效,根本原因在于v-deep生成的scopedId并不是组件库组件的scopedId,所以无法选中。该结论是在微信小程序里测试发现的。

解决办法 在自定义组件中添加option选项

// 这里是自定义组件代码
export default {
    name:"helang",
    // 复制下面这行 options 代码
    options: { styleIsolation: 'shared' },
    props:{
        // ... 其他属性
    },
    data:(){
        return {
            // ... 其他数据
        }    
    }
}

之后用深度选择器去写就好啦

实现原理以及option的详细描述:官网文档

你可能感兴趣的:(微信小程序)