This repository was archived by the owner on Nov 19, 2022. It is now read-only.
Merge kotlin-styled with material UI #39
Description
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!