I haven't yet figured out how to add inline styles...

# react

[Alexander Arbit]

I haven't yet figured out how to add inline styles with the new DSL. I've tried something like:

div {
  style = {
    color = "WHITE"
  }
}

but that doesn't work. I've even attempted to grab things like csstype, hoping it was the missing piece, but I just cannot sort out how to make CSS work in this new DSL.

[Alexander Arbit]

Looking at @turansky’s simple example project again, I finally figured out both the syntax and the library. For future people:
Be sure to import the kotlin-wrappers kotlin-react-css library
The syntax looks like:

div {
  css {
    color = Color("#abc123")
  }
}

I'm still surprised that it uses css and not style for the attribute name, but 🤷

[Alexander Arbit]

Also, for future people, the example project I'm referring to is: https://github.com/karakum-team/kotlin-react-table-sample

[turansky]

1. css - adapter for className configuration (it’s common practice in JS world)
2. style - existed HTML tag

div {
    style {
        + "color: red"
    }
}

3. For inline style you can use

div {
    style = jso {
        color = Color("#abc123")
    }
}

[turansky]

Solution for initial question:

div {
  style = jso {
    color = NamedColor.white
  }
}