Kotlin React中如何使用CSS百分比(%)长度单位？

kotlin-react 依赖的 kotlin-css 库当前版本的Length.kt确实没有内置百分比（%）长度单位，可通过以下两种方式实现需求，两种方式都能完成「输入框高度为父元素50%」的效果。

方案1：直接传入CSS字符串值（新手首选，零额外代码） #

框架的CSS属性本身兼容原生CSS字符串值，不需要依赖内置的Length类型，直接写和原生CSS一致的百分比字符串即可：

import react.dom.html.InputType
import styled.css
import styled.styledInput

// 定义高度为父元素50%的输入框
val CustomInput = styledInput {
    attrs {
        type = InputType.text
    }
    css {
        height = "50%"
        // 其他需要百分比的属性同理，比如宽度占满父元素就写 width = "100%"
    }
}

该写法无额外学习成本，所有支持百分比的CSS属性都可以直接这么用，不存在兼容问题。

方案2：自定义百分比单位扩展（适合项目高频使用场景） #

如果项目中大量用到百分比单位，可以自定义一个扩展函数，和框架内置的px/rem/em等单位保持一致的调用体验，同时避免字符串拼写错误：

import kotlinx.css.LinearDimension

// 给数字类型加pct扩展，返回CSS可识别的长度值
fun Number.pct(): LinearDimension = LinearDimension("${this}%")

// 样式块中直接调用即可
val CustomInput = styledInput {
    css {
        height = 50.pct()
        width = 100.pct()
    }
}

注意：百分比高度生效的前提是父元素有明确的可计算高度，否则浏览器会将高度按auto渲染。你需要确保父元素要么设置了固定高度，要么父元素自身也通过百分比/弹性布局拿到了确定高度，50%的高度设置才会生效。

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