微信小程序应用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' 时候父组件设置的款式在子组件是有效的,应用的时候须要留神