[uniapp/wx小程序] 给自定义组件或ui组件加样式在wx小程序不生效

Voices_2024-08-24 21:21

原因：

不论是自定义组件还是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;
}