I am trying to use `kotlin-styled-next` but it see...

# react

[Stylianos Gakis]

I am trying to use kotlin-styled-next but it seems like it’s not quite possible with the new FC function. What is the plan of using that with the styledX builder functions? Code sample below:

val SomeComponent = FC<SomeComponentProps> { props ->
  this.apply { // this: ChildrenBuilder
    div { // I would want to be able to call styledDiv here
    }
  }
  (this as RBuilder).apply { // This obviously fails, as we're not in a RBuilder context anymore.
    styledDiv {
      css {
        // style stuff
      }
      +"Hello ${props.name}"
    }
  }
}

So how do I go from my FC to having a RBuilder context? Are the styledX functions not supposed to be used in this context? What’s the story around these two concepts?

[turansky]

You can find CSS support for new builder in kotlin-react-css .
Example

Bonus - less bundle size

cc @Sergei Grishchenko

[Stylianos Gakis]

And better types, for example instead of margin = "auto" I can now do margin = Length.auto that’s awesome!
What does this mean for kotlin-style-next? I am just not including it now as a dependency and the code is nicer with kotlin-react-css. Reading its readme doesn’t mention anything about this alternative, it was a bit confusing.
I think a lot of it has to do with me trying out Kotlin-JS for the first time ever so I am not aware of what’s going on in the ecosystem, but maybe this feedback is at least worth something to you 😄

[Stylianos Gakis]

And a question, I haven’t found out a way to do something like object ComponentStyles : StyleSheet(name = "ComponentStyles", isStatic = true) { ... } with this new dependency, is it named differently or what?
I couldn’t find anything in that part of the repository, maybe there’s some docs that I am missing?

[turansky]

What is your use case for style sheet?

[Stylianos Gakis]

None in particular, it was just the way the docs had it in kotlin-styled-next so I was looking to change my code 1:1.

If you’ve considered it and decided that it’s not something worthy of being included that’s perfectly fine. I inlined my css for now since I wasn’t reusing any style sheet anyway.

[turansky]

but maybe this feedback is at least worth something to you 😄

More feedback -> better wrappers