Импорт внешних CSS в приложении Kotlin React

Question

Я хочу использовать библиотеку CSS, например, начальную загрузку / материал внутри моего приложения Kotlin-React. Есть ли способ импортировать эти внешние библиотеки CSS? Существует оболочка в стиле Kotlin, но вы не знаете, как использовать ее для импорта CSS.

Answer 1

Это не прямой ответ, как импортировать фрагмент внешнего CSS, но позвольте мне показать вам, как я успешно использовал библиотеку пользовательского интерфейса материала с Kotlin и React. Вот демонстрация проекта: https://krzema12.github.io/fsynth/

См. Пример набора текста 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)

Тогда я мог бы использовать этот компонент следующим образом:

materialListItem {
...children...
}

(источник: https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/App.kt)

Насколько я понимаю из этой страницы документации Material UI, он работает, и этого достаточно, потому что CSS встроен в JavaScript.