Hi all, this is a very basic question but I have b...

# javascript

[gbaldeck]

Hi all, this is a very basic question but I have been searching for an answer for a while with no luck. I am using the kotlin react wrappers with emotion. How do I specify a className in my components using css classes? It looks like the css block lets me set css properties but I cannot set any actual class names with that. Does anyone know how?

Here is an example of what I'm trying to do:

div {
       className = "flex justify-center"
}

[Chrimaeon]

have you checked this? https://github.com/JetBrains/kotlin-wrappers/blob/master/docs/guide/emotion.md

[Chrimaeon]

and this https://github.com/JetBrains/kotlin-wrappers/blob/master/docs/guide/react.md#using-kotlin-emotion-with-kotlin-react

[Chrimaeon]

I guess what you are looking for is

div {
        css("flex justify-center")

        +"Hello"
    }

[turansky]

In common case we expect class name constants and cx (from Emotion) usage

// in common
object CN {
    val flex = ClassName("flex")
    val justifyCenter = ClassName("justify-center")
}

// in component
div {
    className = cx(CN.flex, CN.justifyCenter)
}