I have two questions about generating classes with emotion. 1. how can I generate a class with a gi...

# react

[Dirk]

I have two questions about generating classes with emotion.

1. how can I generate a class with a given name and include it on the page (e.g. ".external_component")?
2. how do I represent inheritance structures with emotion? For example, .x:hover > span {}. How can I do this for my own classes (with generated names) and for named classes from 1?

[Dirk]

Ok for the generic class i found the inheritance configuration

Button {
    className = emotion.css.ClassName(classNameButton) {
        padding = 0.rem
        height = 14.px
        lineHeight = important(14.px)
        textDecoration = TextDecoration.underline

        // .xyz > span {}
        Selector("> span")() {
            backgroundColor = Color("red")
        }
...
}

[turansky]

how do I represent inheritance structures with emotion?

Strings for now

[turansky]

"> span" {
    backgroundColor = NamedColor.red
}

[Dirk]

Should the method not be used?

I have to test it again in the office on Monday...

Selector("> span")() {
            backgroundColor = Color("red")
        }

[turansky]

Selector will be called inside if you will use String as receiver