原因:
不论是自定义组件还是ui组件,本质上都是因为微信小程序的**组件隔离策略**造成的
另外,组件内不能使用id选择器
官方说明:
组件和引用组件的页面不能使用id选择器(
#a
)、属性选择器([a]
)和标签名选择器,请改用class选择器。#a { } /* 在组件中不能使用 */ [a] { } /* 在组件中不能使用 */ button { } /* 在组件中不能使用 */ .a > .b { } /* 除非 .a 是 view 组件节点,否则不一定会生效 */
几种解决方法参考:
1.首先检查选择器的问题,组件内不能使用id选择器
2.解除样式隔离
和data/methods同级,增加该配置,这样父级的样式就可以穿透到子组件
options: {
styleIsolation: 'shared', // 解除样式隔离
}
3.使用 ::v-deep
css
::v-deep .xxx{
width:100px;
}