时间戳

首页 > 解决方案 > 在 Kotlin React 应用程序中导入外部 css

kotlin - 在 Kotlin React 应用程序中导入外部 css

问题描述

我想在我的 Kotlin-React 应用程序中使用像 bootstrap/material 这样的 css 库。有没有办法导入那些外部 css 库？有一个Kotlin 风格的包装器，但不知道如何使用它来导入 css。

标签： kotlinkotlin-jskotlin-frontend

解决方案

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

请参阅为 Material 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 ）

根据我从Material UI 的这个文档页面的理解，它可以工作并且足够了，因为 CSS 嵌入在 JavaScript 中。

推荐阅读