Question

我想在我的Kotlin-React应用程序中使用诸如bootstrap / material之类的CSS库。有没有办法导入这些外部CSS库？有一个Kotlin-Styled包装器，但不确定如何使用它来导入CSS。

Answer 1

这不是直接导入外部CSS的直接答案，但让我向您展示如何成功地将Material UI库与Kotlin和React结合使用。这是该项目的演示：https://krzema12.github.io/fsynth/

请参阅为材料UI组件键入示例Kotlin：

@file:JsModule("@material-ui/core/ListItem")

package it.krzeminski.fsynth.typings.materialui.widgets

import react.RProps
import react.RState
import react.ReactElement

@JsName("default")
external class ListItem : react.Component<RProps, RState> {
    override fun render(): ReactElement?
}

（来源：https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/typings/materialui/widgets/ListItem.kt）

和便利包装：

fun RBuilder.materialListItem(handler: RHandler<RProps>) = child(ListItem::class) {
    handler()
}

（来源：https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/typings/MaterialUiBuilders.kt#L42）

然后我可以通过以下方式使用此组件：

materialListItem {
...children...
}

（来源：https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/App.kt）

根据我对this docs page of Material UI的了解，它可以正常工作，因为CSS嵌入在JavaScript中就足够了。

在Kotlin React应用程序中导入外部CSS

1 个答案: