Also fishing for advice on if anyone has a good li...

# javascript

[Robert Munro]

Also fishing for advice on if anyone has a good link for instructions on how to make https://material-ui.com/ work with kjs react? it looks like i have to do some wrapping of components - i tried these but get various errors - but maybe i just need to persist 🤷🏼‍♂️sorta just looking for the right way to go ...
• https://github.com/cfnz/muirwik
• https://akjaw.com/kotlinjs-react-redux-with-thunk-and-material-ui/

[Luc Girardin]

I had a somewhat satisfying experience using https://github.com/subroh0508/kotlin-material-ui

[Andrey Ivanov]

I wanted to add material-ui components myself, without muirwik.

I got it like this:

connection to gradl:
implementation (npm ("@ material-ui/core", "4.11.4"))
implementation (npm ("@ material-ui/icons", "4.11.2"))

description:
@file: JsModule ("@ material-ui/core/Checkbox")
@file: JsNonModule

package components.shared.materialUI.checkBox

import react.RClass
import react.RProps

external interface IconButtonProps: RProps {
var id: String?
var onChange: () -> Unit?
var checked: Boolean?
}

@JsName ("default")
external val Checkbox: RClass <IconButtonProps>

using:
import components.shared.materialUI.checkBox.Checkbox
// .................
styledDiv {
css {
+ AuthorizationFormStyled.checkBox
}
Checkbox {
attrs {
id = "rememberMe"
checked = rememberMeFlag
onChange = {setRememberMeFlag (! rememberMeFlag)}
}

}
styledLabel {
css {
+ AuthorizationFormStyled.checkBoxLabel
}
attrs ["htmlFor"] = "rememberMe"
+ "Remember on this device"
}
}

[Robert Munro]

@Andrey Ivanov that seem to work fine thanks! ... how do i access the checkbox value though?

[Robert Munro]

i made it work with a state variable but it doesnt actually read the checkbox value .. maybe thtats the react way though - but it wouldnt work for a text field

[Andrey Ivanov]

TextField {
    attrs {
        id = "authName"
        placeholder = "Input name"
        variant = "outlined"
        focused = false
        onChange = { event: Event ->
            val target = event.target?.asJsObject().unsafeCast<HTMLInputElement>()
            props.changeName(target.value)
        }
    }
}

[Robert Munro]

how about icons? I tried this...

@file: JsModule("@material-ui/icons/AccessAlarm")
@file: JsNonModule

package material

import react.RClass
import react.RProps

@JsName("default")
external val AccessAlarm: RClass<RProps>

[Andrey Ivanov]

Should work

[Robert Munro]

it says Module '@material-ui/icons/AccessAlarm' not found

but i have

implementation(npm("@material-ui/icons", "4.11.2"))

in build.gadle.kts

does it look right?

[Andrey Ivanov]

yes. in my project this construction works

@file:JsModule("@material-ui/icons/Visibility")
@file:JsNonModule

package components.shared.materialUI.icon

import react.RClass

@JsName("default")
external val Visibility: RClass<IconProps>

[Robert Munro]

I dont guess you have any pointers/examples on how theming works? 🙂 i have the AppBar imported but seem to only be able to use primary or secondary colors

[Andrey Ivanov]

Here I probably use a workaround, I just styled the components in js through the interlocking of classes and scss, and not through the theme. Therefore, here I use a wrapper from a div to which I assign the style from the StyleSheet, and in this style I interrupt the necessary classes


object TextFieldStyled: StyleSheet ("textField", isStatic = true) {
val authPageWhite by css {
position = Position.relative

".MuiInputBase-input" {
height = 40.px
fontWeight = FontWeight.w300
color = Color.white
fontSize = 30.px
lineHeight = LineHeight ("40px")
paddingLeft = 31.px

placeholder {
color = Color.white
opacity = 1
fontStyle = FontStyle.italic
fontWeight = FontWeight.w100
}
}

".MuiButtonBase-root" {
position = Position.absolute
right = 20.px
bottom = 12.px
}

//etc
}

[Robert Munro]

cheers. i am away for a few days but will give it a go when i get back ...

[Piotr Krzemiński]

a few cents from me: I've been using muirwik in https://fsynthlib.github.io/fsynth/ and it does the job pretty well 🙂 I use icons there as well. If you share your exact issue, I'm sure either me or the muirwik author can help, he's pretty responsive in the GitHub issues.

[Robert Munro]

Actually muirwik seems to work well now that i've been through the examples - i think tis the way to go..