div with inline styling

[ralph-bergmann]

I'm a newbie and I'm wondering how I can add inline styling to a div element.

Finally I need something like this: <div id='map' style='width: 400px; height: 300px;'></div>.

Adding the id was with the help of Google not so complicated:

import kotlinx.html.id
import react.RBuilder
import react.RComponent
import react.RProps
import react.RState
import react.dom.div

@JsExport
class Welcome(props: RProps) : RComponent<RProps, RState>(props) {

    override fun RBuilder.render() {

        div {
            attrs {
                id = "map"
            }
        }
    }
}

But I failed with adding the inline style :-(

Near the id attribute I found the style attribute (https://github.com/Kotlin/kotlinx.html/blob/master/src/commonMain/kotlin/generated/gen-attr-traits.kt#L337). It expects a String, so I tried:

div {
    attrs {
        id = "map"
        style = "width: 400px; height: 300px;"
    }
}

It fails with this error message:

react-dom.development.js?949d:22665 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.
    in div (created by Welcome)
    in Welcome
    at assertValidProps (react-dom.development.js?949d:4760)
    at setInitialProperties (react-dom.development.js?949d:6025)
    at finalizeInitialChildren (react-dom.development.js?949d:7499)
    at completeWork (react-dom.development.js?949d:18978)
    at completeUnitOfWork (react-dom.development.js?949d:22189)
    at performUnitOfWork (react-dom.development.js?949d:22165)
    at workLoopSync (react-dom.development.js?949d:22130)
    at performSyncWorkOnRoot (react-dom.development.js?949d:21756)
    at scheduleUpdateOnFiber (react-dom.development.js?949d:21188)
    at updateContainer (react-dom.development.js?949d:24373)

I tried what the error message says:

div {
    attrs {
        id = "map"
        style={{marginRight: spacing + 'em'}}
    }
}

Now I get an Unresolved reference: marginRight error in the IDE.

How can I add some inline styling to a div?

[orchestr7]

Got the same error, @the4thfloor have you resolved that?

label("border pr-1 pl-1 text-xs text-muted") {
                attrs { style = "border-radius: 2em;" }
}

[ss04661]

    div {
        attrs {
            style = object { val width = 600.px }.asDynamic()
        }
    }

or

    div {
        attrs {
            style = js("({width:'600.px'})")
        }
    }

react style need object，but kotlinx.html style is string， so use dynamic hack it

[St2r]

This works with typings, but I wonder if style can be used as a parameter of html-tags, just like React.JS.

div {
    +"Hello from JS"
}.apply {
    this.style.color = "red"
}

[martinstender]

Why not just: div { attributes["style"] = "color: white; background-color: #bada55" +"some content" } ?

[Joseph-Hui]

    div {
        attrs {
            style = js("({width:'600.px'})")
        }
    }

Should it be 600px instead of 600.px?