Merge kotlin-styled with material UI

[joost-klitsie]

It would be really cool to use css builders in combination with material ui. In order to do this, we can add the kotlin-styled library to the project dependencies. After that, we can add a css builder to the MaterialElementBuilder:

abstract class MaterialElementBuilder<T : Tag, Props : StandardProps>(
    //.....
    val muiCss = CSSBuilder()
        get() = field.also {
            useCSSBuilder = true
        }
    private var useCSSBuilder = false // Just so we have no changed functionality if muiCss {} is not invoked
    //.....
    override fun create(): ReactElement {
        Object.keys(materialProps).forEach { key -> setProp(key, materialProps[key]) }
        return if (useCSSBuilder) {
            Styled.createElement(type, muiCss, props, childList)
        }
        else {
            createElement(type, props, *childList.toTypedArray())
        }
    }
}
inline fun MaterialElementBuilder<*, *>.muiCss(handler: RuleSet) = muiCss.handler()

After this, we can simply make components, just like how we would use styled components:

button {
    muiCss {
        // ...WHATEVER styling I want :)
        margin(left = useTheme().spacing(3))
        backgroundColor = useTheme().palette.primary.main
    }
    attrs {
        variant = ButtonVariant.outlined
        color = ButtonColor.primary
        onClick = {
            setShowDialog(true)
        }
    }
    +"Edit"
}

I understand that this is a wrapper library, so perhaps this functionality is unwanted as adding functionality defeats the purpose of having a wrapper, but perhaps it is worth looking into. Perhaps we can enable/disable it, perhaps we can create a kotlin-styled-material-ui fork or something.

Please advice and give your opinion, also if this is a stupid idea!

[subroh0508]

@joost-klitsie Thanks for the suggestion! 😎

It would certainly be nice to be able to set CSS as well, like the attrs method. However, the original Material-UI recommends using the makeStyles method to completely separate the CSS settings.

https://material-ui.com/styles/basics/

Kotlin Material-UI already supports makeStyles, so I don't think it's necessary to add a new method.