How to style react.router.dom.Link with styled components?

Tried the following ways:

1. Manual introduction of a CSS class -> no dynamic CSS configurations are possible:

Link {
        attrs {
            className = ClassName("SomeClassName")
            // ...
        }
        // ...
}

1. Raw style description -> mixing with rule sets and pseudo-classes usages are not possible:

Link {
        attrs {
            style = CssBuilder().apply {
                visited {
                    color = Theme.palette.actionSecondary1.get(context)
                }
                // ...
            }.toStyle().unsafeCast<Properties>()
        }
        // ...
}

1. css { ... } blocks inside of Link -> attrs obviously don’t work as well.

Is there any convenient solution to style react.router.dom.Link dynamically with styled components?

[andrew-k-21-12]

And as it was expected, it can be also done pretty easily with styled components:

div { // can be any other RDOMBuilder scope provider
    styled(Link).invoke(this) { // "this" refers to the current RDOMBuilder, i.e. where to insert this component
        css {
            // Required styling.
        }
        attrs {
            to = "setting-attributes"
        }
        +"Link's label"
    }
}

[andrew-k-21-12]

If there are no ways to do the described thing via styled components - then yes, sure, will switch to kotlin-emotion 🙂