假设 -> <page style="--test-bg: blue;">
<view style="--test-color: red;">
<root-portal>
<view style="color: var(--test-color);">测试文字</view>
<view style="background-color: var(--test-bg);">测试背景</view>
</root-portal>
</view>
假设 -> </page>
root-portal组件外部的CSS变量全都无法使用
可以先参考下 css 变量的使用
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
page{
--test-y: 100%;
}
.bottom-enter,
.bottom-leave-to {
transform: translate3d(0, var(--test-y), 0);
}
我觉得这个讨论又要被忽略了
假设 -> <page style="--test-bg: blue;"> <view style="--test-color: red;"> <root-portal> <view style="color: var(--test-color);">测试文字</view> <view style="background-color: var(--test-bg);">测试背景</view> </root-portal> </view> 假设 -> </page>