Import external css in a Kotlin React app

Question

I want to use css library like bootstrap/material inside my Kotlin-React app. Is there a way to import those external css libraries? There is a Kotlin-Styled wrapper but not sure how to use it to import css.

Answer 1

It's not a direct answer how to import a piece of external CSS, but let me show you how I successfully used Material UI library with Kotlin and React. Here's a demo of the project: https://krzema12.github.io/fsynth/

See an example Kotlin typing for a Material UI component:

@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?
}

(source: https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/typings/materialui/widgets/ListItem.kt)

and a convenience wrapper:

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

(source: https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/typings/MaterialUiBuilders.kt#L42)

Then I could use this component in the following way:

materialListItem {
...children...
}

(source: https://github.com/krzema12/fsynth/blob/master/web/src/main/kotlin/it/krzeminski/fsynth/App.kt)

From what I understand from this docs page of Material UI, it works and it's enough because CSS is embedded within JavaScript.