微信小程序使用externalClasses可以让父组件的样式更改到子组件里面。
子组件:
子组件js:
Component({
externalClasses: ['my-class'],
// 组件选项
options: {
styleIsolation: 'apply-shared',
},
})
子组件wxml:
<view class="my-class">测试父组件传递的样式</view>
父组件:
父组件wxml:
<childern my-class="check-child"></childern>
父组件wxss:
.check-child {
background: red;
}
上面就可以使子组件使用父组件传入的样式了。
子组件定义的styleIsolation一共有三个值:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)
注意:我在子组件使用styleIsolation: 'shared' 时候父组件设置的样式在子组件是无效的,使用的时候需要注意
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。