Closed zxy-c closed 2 years ago
Adding just the Box component would be relatively easy, but I think what you are wanting is the Material-UI System props so you can set things like padding, color, etc... e.g.
<Box
color="primary.main"
bgcolor="background.paper"
fontFamily="h6.fontFamily"
fontSize={'h6.fontSize'}
p={2}
>
Some Text
</Box>
There is a fair amount of work making that all type safe, most of which can already be achieved with a styled div and using kotlin-css/the styled components wrapper which does pretty much the same thing... e.g.
styledDiv {
css {
color = Color(theme.palette.primary.main)
backgroundColor = Color(theme.palette.background.paper)
fontFamily = theme.typography.h6.fontFamily!!
padding(2.spacingUnits)
}
+"Some Text"
}
Some things will be harder to use like p={{ xs: 2, sm: 3, md: 4}}
, but that will also take a bit of figuring out how to make it type safe/Kotlin style, even when using the Kotlin css existing types...
So, it would be nice, but might take a bit...
Box component is in Material UI 5 version which is just merged to master. The sx props however will need to be specified us asDynamic.
https://material-ui.com/zh/components/box/