Kotlin/JS设置zIndex报类型不匹配错误的正确赋值方法

报错原因 #

• zIndex属性在Kotlin/JS的类型安全CSS DSL中被约束为ZIndex?类型，不支持隐式类型转换：
  • 直接赋值整数12不生效，是因为普通Int类型无法匹配ZIndex?类型要求
  • 赋值12.px触发类型报错，是因为.px返回的是长度单位（Length）类型，而z-index是无单位的整数属性，不属于长度类CSS属性，类型不匹配。

正确实现方式 #

常规数值z-index #

使用ZIndex类包裹目标整数值即可，对应CSS中无单位的z-index数值写法：

css {
    zIndex = ZIndex(12)
}

特殊关键字取值 #

CSS规范中z-index支持的关键字也有对应常量可直接赋值：

• 自动堆叠（默认值）：zIndex = ZIndex.auto
• 继承父元素值：zIndex = ZIndex.inherit
• 恢复属性初始值：zIndex = ZIndex.initial
• 取消继承重置为默认：zIndex = ZIndex.unset

兼容兜底写法 #

如果遇到版本差异导致ZIndex类构造方法不可用的场景，可以直接调用CSS属性设置方法传字符串值兜底：

css {
    setProperty("z-index", "12")
}

内容的提问来源于stack exchange，提问作者moxi