I use MUI wrapper and I can't understand how to ap...

# javascript

[Joe]

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?

[turansky]

PropsWithSx is what you need if you want to use sx extension

[turansky]

sx

[Joe]

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]

Oh, I just realized how to do this.

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

[aerialist]

@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