https://kotlinlang.org logo
#javascript
Title
# javascript
j

Joe

02/09/2023, 6:32 PM
I use MUI wrapper and I can't understand how to apply this method of passing sx props: https://mui.com/system/getting-started/the-sx-prop/#passing-the-sx-prop I created my own component and it's props:
Copy code
val MyComponent = FC<MyCompontentProps> {
    Box {
        // content of the component
    }
}

external interface MyComponentProps : Props {
    var sxProps: SxProps<Theme>?
}
But I don't know what I should do to use it in the following way:
Copy code
MyComponent {
    sx {
        width = 50.pct
        // etc
    }
}
Or am I doing something wrong?
1
t

turansky

02/10/2023, 12:01 AM
PropsWithSx
is what you need if you want to use
sx
extension
j

Joe

02/10/2023, 8:59 AM
Thank you! But how to merge these props with sx props of a component? Now I have
Copy code
external interface MyComponentProps : PropsWithSx
And my component with some it's own sx props:
Copy code
val MyComponent = FC<MyComponentProps> { props ->
    Box {
        sx {
            // call it "inner props"
        }
    }
}
And I use the component like this:
Copy code
MyComponent {
    sx {
        width = 50.pct // call it "outer props"
    }
}
But it doesn't work: I do nothing to apply outer props. I try
Copy code
val MyComponent = FC<MyComponentProps> { props ->
    Box {
        sx = <http://props.sx|props.sx>
        sx {
            // some inner props
        }
    }
}
But it doesn't work too.
Oh, I just realized how to do this.
Copy code
val MyComponent = FC<MyComponentProps> { props ->
    Box {
        sx {
            // inner props
            <http://+props.sx|+props.sx>
        }
    }
}
a

aerialist

02/10/2023, 9:23 AM
@Joe, correct! You can find other examples of how to work with MUI Kotlin in
kotlin-mui-showcase
sample https://github.com/karakum-team/kotlin-mui-showcase
66 Views