通过文档可知,小程序自定义组件有名为externalClasses的属性,可以以数组字符串的方法引入父组件的样式
示例方法如下:
子组件
/* 组件 custom-component.js */Component({ externalClasses: ['my-class']})
<!-- 组件 custom-component.wxml --><custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>
父组件
<!-- 页面的 WXML --><custom-component my-class="red-text" />
/* 页面的 WXSS */.red-text { color: red;}
注:此处有个坑点,externalClasses是一个字符串数组,但我再具体应用过程中发现,里面的字符串命名方式对驼峰命名不友好,如上面的“my-class”写成“myClass”,在实际应用中会失效
社区上有相关讨论,感兴趣可以看下externalClasses 支持驼峰命名
文章转载于:https://www.jianshu.com/p/482cdd89b913
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~