收藏
回答

如何在Skyline渲染的自定义组件中使用:host选择器定义样式?

在Skyline渲染的界面里,自定义的组件在wxss中使用host选择器选择标签本身定义样式会失效。例:


custom-tag.wxss

:host {
    color: red;
    background-color: blue;
    width: 100rpx;
    height: 100rpx;
    display: block;
}


custom-tag.wxml

<view>Content</view>


page.wxml

<custom-tag/>



看到的只是黑色的Content,没有背景色,也没有前景色,更没有大小。

这个功能的失效对自定义组件的开发影响较大。

微信开发者工具版本: Windows Stable 1.06.2308310

基础库版本:3.1.3

回答关注问题邀请回答
收藏

2 个回答

  • 夏味
    夏味
    2023-10-19

    建议 custom-tag.wxml 里面 使用 <view class="class">Content</view>


    然后自定义组件设置上 externalClasses: ['class']


    这样外部传进来的 class 就可以生效了

    2023-10-19
    有用
    回复 2
    • 周世隆
      周世隆
      2023-10-23
      尝试了一下,估计还要配合virtualHost和style属性,基本能达到预期的效果,只不过这样子做的话,稍微复杂了一点
      2023-10-23
      回复
    • 夏味
      夏味
      2023-10-23回复周世隆
      我自己测试过,virtualHost 和普通自定义组件的性能相差不大,而且 virtualHost 节点少,调试时会方便许多。于是我自定义组件都用 virtualHost。


      传 class 的方式需要注意 class 的权重问题。


      另一个解法是使用全局样式 ~class名语法,也许在某些场景适合
      2023-10-23
      1
      回复
  • 微盟
    微盟
    2023-10-19

    https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/wxss.html

    只支持 :first-child 和 :last-child,其它暂无计划

    2023-10-19
    有用
    回复
登录 后发表内容