收藏
回答

root-portal 不支持CSS Variable(CSS变量)?

root-portal 组件在webview渲染模式下,不支持CSS变量?

  1. 使用官方代码实例https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html,添加(或修改)以下style代码
app.wxss:
page, root-portal {
  --UI-BG-0#ededed;
  background-colorvar(--UI-BG-0);
}

@media (prefers-color-scheme: dark) {
  page, root-portal {
    --UI-BG-0#191919;
    background-colorvar(--UI-BG-0);
  }
}

index.wxss:
.intro {
  margin60px 20px;
  text-align: center;
}
.portal-content {
  position: absolute;
  left40px;
  top40px;
  right40px;
  bottom40px;
  text-align: center;
  padding20px;
  background-colorvar(--UI-BG-0,deepskyblue);
}

点击按钮,开启组件:

浅色模式

深色模式


结果:页面背景颜色可使用预设css变量,而root-portal内view无法使用预设css变量(deepskyblue为兜底);Android真机和IOS真机也都不能使用css变量,代码比较简单,只需在官方代码示例内稍加更改,就不上代码片段了。


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

3 个回答

  • 小程序技术专员-binnie
    小程序技术专员-binnie
    2022-08-29

    因为改的是外层 <root-portal> 的样式,内部的样式优先级较高所以符合预期,测试了修改是可以生效的,你可以再试试看

    2022-08-29
    有用 1
    回复 5
    • 似水流年
      似水流年
      发表于移动端
      2022-08-29
      如果有用,容器的背景颜色应该是--UI-BG-0,而不应该是deepskyblue,你的截图跟我发的一样,你应该理解错了
      2022-08-29
      回复
    • 似水流年
      似水流年
      发表于移动端
      2022-08-29
      因为在app.wxss内通过媒体查询,定义了--UI-BG-0变量,如果生效,深色模式下就不应该是天蓝色背景,正因为不支持,所以才会呈现天蓝色背景
      2022-08-29
      回复
    • Towry
      Towry
      2023-05-30
      是真的不支持啊
      2023-05-30
      回复
    • 夏味
      夏味
      2023-06-21
      bug:root-portal 在 webview 模式,无法继承全局 page 的样式
      see:https://github.com/xiaweiss/miniprogram-bug-report/issues/40
      可以 hack 解决,具体见上面 issue 详情
      2023-06-21
      回复
    • 卧槽,无情
      卧槽,无情
      03-08
      问题至今未解决
      03-08
      回复
  • 王 家大院掌门人
    王 家大院掌门人
    发表于移动端
    2023-10-04
    2023-10-04
    有用
    回复
  • 夏味
    夏味
    2023-06-21

    bug:root-portal 在 webview 模式,无法继承全局 page 的样式

    see:https://github.com/xiaweiss/miniprogram-bug-report/issues/40

    可以 hack 解决,具体见上面 issue 详情

    2023-06-21
    有用
    回复
登录 后发表内容