root-portal 组件在webview渲染模式下,不支持CSS变量?
- 使用官方代码实例https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html,添加(或修改)以下style代码
app.wxss:
page, root-portal {
--UI-BG-0: #ededed;
background-color: var(--UI-BG-0);
}
@media (prefers-color-scheme: dark) {
page, root-portal {
--UI-BG-0: #191919;
background-color: var(--UI-BG-0);
}
}
index.wxss:
.intro {
margin: 60px 20px;
text-align: center;
}
.portal-content {
position: absolute;
left: 40px;
top: 40px;
right: 40px;
bottom: 40px;
text-align: center;
padding: 20px;
background-color: var(--UI-BG-0,deepskyblue);
}
点击按钮,开启组件:
浅色模式
深色模式
因为改的是外层 <root-portal> 的样式,内部的样式优先级较高所以符合预期,测试了修改是可以生效的,你可以再试试看
see:https://github.com/xiaweiss/miniprogram-bug-report/issues/40
可以 hack 解决,具体见上面 issue 详情
bug:root-portal 在 webview 模式,无法继承全局 page 的样式
see:https://github.com/xiaweiss/miniprogram-bug-report/issues/40
可以 hack 解决,具体见上面 issue 详情