Styled components css produces "Uncaught Error" with useState hook

When using styled-components and a useState hook, an Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement. is produced when trying to set the state.

Example code that should give error:

import kotlinx.css.Color
import kotlinx.css.backgroundColor
import kotlinx.html.js.onClickFunction
import react.RBuilder
import react.RProps
import react.child
import react.dom.button
import react.dom.p
import react.dom.render
import react.functionalComponent
import react.useState
import styled.css
import styled.styledDiv
import kotlin.browser.document

fun main() {
    render(document.getElementById("root")) {
        exampleStyledComponent()
    }
}

val exampleStyledComponent = functionalComponent<RProps> {
    val (count, setCount) = useState(1)

    styledDiv {
        css {
            backgroundColor = Color.red
        }
        button {
            attrs {
                onClickFunction = {
                    setCount(count + 1)
                }
            }
            +"Increment"
        }
        p { +"$count" }
    }
}

fun RBuilder.exampleStyledComponent() = child(exampleStyledComponent)

In this example, if I remove the backgroundColor = Color.red from the css lambda, setCount works.

I am using kotlin js 1.3.70-eap-274.

[pillimoj]

I am getting this exact behaviour. My dependencies:

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("org.jetbrains:kotlin-react:16.13.0-pre.94-kotlin-1.3.70")
    implementation("org.jetbrains:kotlin-react-dom:16.13.0-pre.94-kotlin-1.3.70")
    implementation(npm("react", "16.13.0"))
    implementation(npm("react-dom", "16.13.0"))

    implementation("org.jetbrains:kotlin-styled:1.0.0-pre.94-kotlin-1.3.70")
    implementation(npm("styled-components"))
    implementation(npm("inline-style-prefixer"))

    implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-common:1.3.3")
}

EDIT: This issue seems to be caused by using a newer version of styled-components. fixed by specifying:

implementation(npm("styled-components", "4.4.0"))

[Leonya]

We are hoping to release kotlin-styled-next@1.0 really soon at which point the disclaimer in the documentation will be removed.