cfnz / muirwik

Muirwik - a Material UI React wrapper written in Kotlin
Mozilla Public License 2.0
132 stars 25 forks source link

Add box component #49

Closed zxy-c closed 2 years ago

zxy-c commented 3 years ago

https://material-ui.com/zh/components/box/

cfnz commented 3 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...

cfnz commented 2 years ago

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.