Does anyone know how to present this CSS with Compose HTML S kotlinlang #compose-web

Channels

100daysofcode

100daysofkotlin

100daysofkotlin-2021

androidgithubprojects

cincinnati-user-group

competitive-programming

event21-community-content

java-to-kotlin-refactoring

jvm-ir-backend-feedback

kotlin-multiplatform-contest

kotlinultimatechallenge

myndocs-oauth2-server

naming

navigation-architecture-component

practical-functional-programming

proguard

prozis-android-backup

refactoring-to-kotlin

russian-kotlinasfirst

skia-wasm-interop-temp

stayhungrystayfoolish

swagger-gradle-codegen

tricity-kotlin-user-group

Title

Tuna

04/30/2023, 1:57 PM

Does anyone know how to present this CSS with Compose HTML StyleSheet?

.parent:hover .child {}

I see an old thread but I cannot make it works. https://kotlinlang.slack.com/archives/C01F2HV7868/p1637156187139600

Chrimaeon

04/30/2023, 6:45 PM

This would be the preferred approach I guess, but it does not work in this specific case:

desc(parent + hover, child) style {
   backgroundColor(Color.firebrick)
}

If you do it manually, it works:

"${className(parent)}$hover ${className(child)}" style {
            backgroundColor(Color.aliceblue)
}

with

parent

and

child

defined before the

init

block in the

StyleSheet

it works if one parameter is just a string:

val parent by style {
        desc(self + hover, "img") style {
            backgroundColor(Color.aliceblue)
        }
}

okay here is the best solution I could find:

desc(className(parent) + hover, className(child)) style {
            backgroundColor(Color.firebrick)
}

Tuna

04/30/2023, 10:11 PM

Thanks @Chrimaeon. They works well for me.

Look like I missed

when calling

$parent

19 Views

#compose-web Join Slack