场景:我把u-tabbar 自己封装成了自定义组件,然后我想修改tabar的高度,我用深度选择器怎么都不生效,然后我打开检查元素发现,我想修改的目标元素生成的scopedId和我深度选择器生成的scopedId数值不一样
猜测:自定义组件该页面生成的scopedId是使用的子组件最深的自定义组件的scopedId,也就是说我写的自定义组件,这个页面只会生成一种scopedId,这个id应该是和在这个自定义组件页面中使用的组件库组件中最 深层次的scopedId一致。这个结论有待验证,和本次问题没太大关系。
解决办法 在自定义组件中添加option选项
// 这里是自定义组件代码
export default {
name:"helang",
// 复制下面这行 options 代码
options: { styleIsolation: 'shared' },
props:{
// ... 其他属性
},
data:(){
return {
// ... 其他数据
}
}
}
之后用深度选择器去写就好啦
实现原理以及option的详细描述:官网文档