Hi everyone Is there a code example that shows how...

# javascript

[Shubham Singh]

Hi everyone
Is there a code example that shows how to change WebkitAppearance inside the sx block in MUI components in Kotlin/JS?

I'm able to use backdropFilter = brightness(0.5) but that only works on desktop browsers and not on mobile browsers, and it looks like for mobile/webkit devices, we might need to use -webkit-backdrop-filter and then give it the same effect we used before. Inside sx {}, I'm only able to find something called WebkitAppearance that I'm not sure how to use to achieve the desired effect.

[turansky]

Is there a code example that shows how to change WebkitAppearance inside the sx block in MUI components in Kotlin/JS?

sx {
    WebkitAppearance = none
}

?

[turansky]

we might need to use -webkit-backdrop-filter and then give it the same effect we used before

You can declare custom local extension, like this:

package csstype

var Properties.strokeDasharray: Length?
    get() = asDynamic().strokeDasharray
    set(value) {
        asDynamic().strokeDasharray = value
    }

and report issue in parallel.

[turansky]

WebkitBackdropFilter

[Shubham Singh]

Thank you very much @turansky
Sorry I wasn't able to report the issue on GitHub yesterday.. would you still like it if I did it?