I created a project using the Multiplatform Kotlin...

# javascript

[Jonathan Smith]

I created a project using the Multiplatform Kotlin JS/React setting. It seems to be using import react.dom.html.ReactHTML.* as an HTML DSL instead of the kotlinx.html library and is missing some features. The documentation for kotlinx.html on the wiki says div(classes="c1 c2") { ... } should work but the ReactHTML library does not seem to support the classes argument. I did not find an easy way to substitute kotlinx.html in the code. Why the difference? Is there a work-around? Thanks!

[Dirk]

The react.dom package is the right one. The classname should be an attribute:

div {
  className = csstype.ClassName("c1")
}

[Dirk]

Or with the emotion-library

div {
 className = ClassName {
   marginBottom = 5.px
 }
}

[Jonathan Smith]

Thanks! These are CSS classes provided by an external stylesheet, so the first one does work. It seems a little long however... Before I get too deeply into this, any other differences I should be on the lookout for?

[Jonathan Smith]

Fragment.create {
div {
className = ClassName("container-xl")
div {
className = ClassName("row mb-4 header")
div {
className = ClassName("col-md-12")
h1 { +"Likely Dashboard" }
}
}
}
}

[turansky]

About ClassName - it’s expected, that you will have constants for class names in cases like this.
Will it be more usefull?! 😉

[Jonathan Smith]

I don't have a strong preference either way. (I am used to lots of strings in HTML/CSS land in any case.) But it might be worth JB correcting the online documentation 🙂 See link at bottom of: https://kotlinlang.org/docs/typesafe-html-dsl.html