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.

Did you find a way to do this @Prabhakar? I am trying to do the same. — Franco
– Franco, Commented Mar 18, 2020 at 23:11

PiotrK · Accepted Answer · 2020-02-22 12:26:36Z

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.

answered Feb 22, 2020 at 12:26

PiotrK

1,5821 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Franco Over a year ago

Any idea how to do this when the CSS is not included in the JS of the library you are importing?

Collectives™ on Stack Overflow

Import external css in a Kotlin React app

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related