如何使用 kotlin 样式将 CSS 应用于 KotlinJS/React 中的 table（边框）？

Question

以下是我正在玩的 table 组件的代码示例

import csstype.BorderCollapse.Companion.collapse
import kotlinx.css.border
import react.*
import react.dom.*
import styled.*

external interface BidTableProps : PropsWithChildren {
    var b: List<MyProps>
}
val TableComponent = functionComponent<MyProps> { props ->
    p {
        +"Table below"
    }
    styledTable {
        css {
            border = "1px solid black"
            collapse
        }
        styledThead {
            tr {
                th { +"a_header" }
                th { +"b_header" }
                th { +"c_header" }
            }
        }
        tbody {
            for (b in props.obj) {
                tr {
                    td { +b.a.toString() }
                    td { +b.b }
                    td { +b.c }

                }
            }
        }
    }
    p {
        +"Table above"
    }
}

我看到 table 周围有一个封闭框，但单元格未被分割或边框未应用于单元格。如何将边框正确应用到 table 的所有单元格？奖励：关于使用 kotlin 风格包装器的任何好的文档？

kotlin 风格 -> https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-styled

Answer 1

正如上面提到的 @Михаил-Нафталь 所说，将以下内容添加到 css 块中即可完成工作

css {
    descendants( "th", "td") {
        border = "1px solid black"
    }
    borderCollapse = BorderCollapse.collapse
}

如何使用 kotlin 样式将 CSS 应用于 KotlinJS/React 中的 table（边框）？

How do I apply CSS to a table (borders) in KotlinJS/React using kotlin-styled?

css

kotlin

kotlin-js