使用externalClass自定义组件样式:解决小程序自定义组件无法使用iconfont的问题

问题:

  iconfont在全局、页面Page当中,这个iconfont是都可以出来的;

  但是在自定义组件Components里面,这个iconfont是出不来的。

问题原因:

  看了小程序的文档,才发现

  也就是说:组件中,app.wxss中的全局样式无效;把iconfont的css在组件中重新引入就能正常展示icon了。

  其实是全局的样式对自定义的组件无效

  重新引入组件文件的解决方式有点low,所以继续看文档

  可以使用externalClass自定义组件样式

  看官方文档,万变不离其宗。官方文档就是最基本的游戏规则,我们可以根据官方的示例,照葫芦画瓢,实现我们自己的功能。

  实践:

  组件内声明externalClasses,

复制代码
Component({
  properties: {
    link: {
      type: Object,
      value: {}
    }
  },
  externalClasses: ['icon-class']
})
复制代码
<i class="icon-class"></i>

  父组件传入class

<LinkModel wx:if="{{dt.link}}" icon-class="iconfont cs-link"
link="{{tools.jsonToObj(dt.link)}}"></LinkModel>

  这样就ok啦

posted @   古兰精  阅读(1392)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
历史上的今天:
2018-04-22 stylus使用文档总结:选择器+变量+插值+运算符+混合书写+方法
2018-04-22 浏览器工作原理:浅析栈空间和堆空间 - 数据是如何存储的?
2018-04-22 浏览器工作原理:浅析this - 从JavaScript执行上下文的视角讲清楚this
2018-04-22 Vue打包项目图片等静态资源的处理
2018-04-22 详解vue静态资源打包中的坑与解决方案
点击右上角即可分享
微信分享提示