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:

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:

MyComponent {
    sx {
        width = 50.pct
        // etc
    }
}

Or am I doing something wrong?

PropsWithSx

is what you need if you want to use

sx

extension

Thank you! But how to merge these props with sx props of a component? Now I have

external interface MyComponentProps : PropsWithSx

And my component with some it's own sx props:

val MyComponent = FC<MyComponentProps> { props ->
    Box {
        sx {
            // call it "inner props"
        }
    }
}

And I use the component like this:

MyComponent {
    sx {
        width = 50.pct // call it "outer props"
    }
}

But it doesn't work: I do nothing to apply outer props. I try

val MyComponent = FC<MyComponentProps> { props ->
    Box {
        sx = <http://props.sx|props.sx>
        sx {
            // some inner props
        }
    }
}

But it doesn't work too.

@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