Hi, I'm new to mui and was trying to migrate a pro...

# react

[Partho Paul]

Hi, I'm new to mui and was trying to migrate a project from muirwik and kotiln-react-legacy to kotlin-mui and kotlin-react. Earlier we were using Stylesheet from kotlin-styled library and it was working fine with muirwik, but it is not compatible with kotlin-react css. I couldn't find any other way to use stylesheet in kotlin-mui. Can someone please help me out here?

[turansky]

Earlier we were using Stylesheet from kotlin-styled

Do you have example?

cc @Sergei Grishchenko

[Partho Paul]

Here's the sample code from my project

Untitled.txt

[Sergei Grishchenko]

now we have basic support of Css-in-js in react-css package and we (personally me) wanted to support full emotions api

[Sergei Grishchenko]

if you want to keep components and styles separately I would recommend to make a pause in you migration

[Partho Paul]

@Sergei Grishchenko The above snippet is from the older code version (before we started migration). We are looking to get rid of muirwik and other legacy dependencies but couldn't figure out how to handle stylesheets like we did before.

[Sergei Grishchenko]

the simplest way to do it (using react-css)

val createDialog = functionComponent<CreateBuildProps> { props ->
    mDialog(
            fullScreen = true
        ) {
            mFormGroup {
                css(ComponentStyles.formStyle)
                div {
                    css = {
                        margin(1.spacingUnits)
                        minWidth = 300.px
                        maxWidth = 500.px
                    }
                      
                    //  and so on for other elements
                }
            }
        }
}

[Sergei Grishchenko]

I am not sure do we support css prop for MUI components like mFormGroup @turansky?

[turansky]

className = ComponentStyles.formStyle

[Sergei Grishchenko]

I guess formStyle is not a string at all (but I can be wrong)

[Sergei Grishchenko]

formStyle might be declared style (not rendered yet)

[Partho Paul]

@Sergei Grishchenko Yes, it's not a string

[turansky]

className - property of FormGroup

[turansky]

No css block required

[Partho Paul]

className of FormGroup also takes String so still getting the above error

[Sergei Grishchenko]

@Partho Paul We can propose such approach for you:

import emotion.css.css // <- pay attention here

private object ComponentStyles {
    val formControl = css(jso {
        margin(1.spacingUnits)
        minWidth = 300.px
        maxWidth = 500.px
    })
    val button = css(jso {
        margin(top = 10.spacingUnits, 1.spacingUnits, 1.spacingUnits, 1.spacingUnits)
        minWidth = 300.px
        maxWidth = 500.px
    })
    val formStyle = css(jso {
        display = Display.flex
        flexDirection = FlexDirection.column
        justifyContent = JustifyContent.center
        alignItems = Align.center
        paddingBottom = 4.spacingUnits
        margin = Align.auto.toString()
        width = 50.pct
    })
}

className = ComponentStyles.formStyle // <- in components

[Sergei Grishchenko]

emotion.css.css is imported from kotlin-emotion lib

[Sergei Grishchenko]

kotlin-emotion is wrapper for Emotion , we use emotion as engine for kotlin-react-css

[Partho Paul]

@Sergei Grishchenko Thanks a lot!

[Sergei Grishchenko]

be careful with css dsl, emotion.css.css uses new DSL for css-in-js based on csstype

[Sergei Grishchenko]

e.g, margin(1.spacingUnits) is invalid in new DSL, use something like this margin = 1.spacingUnits @turansky correct me if I wrong

[turansky]

I don’t know what is spacingUnits
What is in vanila CSS?

[turansky]

It looks like custom extension

[Sergei Grishchenko]

I guess it is some kind of custom units

val Int.spacingUnits = (this * 4).px

[Sergei Grishchenko]

for 4x4 grid

[Partho Paul]

@Sergei Grishchenko @turansky Thanks a lot! Will check and let you know if this works

[Sergei Grishchenko]

thank you, we appreciate you feedback

[turansky]

Simple example

[Partho Paul]

@Sergei Grishchenko @turansky The className approach didn't work as it was getting overridden by the parent element's css. For now I've used the sx attribute for each element wherever required (wanted to avoid this because of code duplication).
Thanks for your help anyway 🙂

[turansky]

New syntax on board!

[Partho Paul]

Thanks, this should help. Do you have any example for TransitionComponent as well? I couldn't find it in showcase and tables project. In my use case, I want to use slide transitionComponent for opening a dialog.

[turansky]

cc @aerialist

[aerialist]

Hi @Partho Paul, unfortunately there is no such example yet. But you can add it and send a PR 🙂