[mui] mui.*Classes members should be mutable

[xian]

e.g. mui.material.PaperClasses fields should be mutable:

// Automatically generated - do not modify!

package mui.material

import web.cssom.ClassName

external interface PaperClasses {
    /** Styles applied to the root element. */
    var root: ClassName

    /** Styles applied to the root element unless `square={true}`. */
    var rounded: ClassName

    /** Styles applied to the root element if `variant="outlined"`. */
    var outlined: ClassName

    /** Styles applied to the root element if `variant="elevation"`. */
    var elevation: ClassName
...

but between 1.0.0-pre.729 and 1.0.0-pre.774 it became:

// Automatically generated - do not modify!

@file:JsModule("@mui/material/Paper")

package mui.material

import web.cssom.ClassName

sealed external interface PaperClasses {
    /** Styles applied to the root element. */
    val root: ClassName

    /** Styles applied to the root element unless `square={true}`. */
    val rounded: ClassName

    /** Styles applied to the root element if `variant="outlined"`. */
    val outlined: ClassName

    /** Styles applied to the root element if `variant="elevation"`. */
    val elevation: ClassName
...

[turansky]

Details - #2240

[turansky]

@xian did you checked #2240 and related documentation? Current behaviour is expected - no changes planned.

[xian]

2240 and related documentation offer no clue how to reimplement code like this:

    Drawer {
        attrs.classes = jso {
            root = ClassName(themeStyles.appDrawer)
            paperAnchorLeft = ClassName(themeStyles.appDrawerPaper)
        }
        attrs.variant = DrawerVariant.persistent
        attrs.open = props.open
        attrs.onClose = handleClose
        …

Any clues much appreciated. @turansky

[turansky]

0. attrs? With kotlin-react you will have more options ;)

Possible solutions:

Clue 1 - "Styled components" section from docs

Separate component

val Switch = BaseSwitch.styled {
  width = 32.px
  height = 20.px

  and(switchClasses.thumb) {
    width = 14.px
    height = 14px
}

val MyComponent = FC {
    Switch()
}

css block

BaseSwitch.styled {
  width = 32.px
  height = 20.px

  and(switchClasses.thumb) {
    width = 14.px
    height = 14px
  }
}

val MyComponent = FC {
  BaseSwitch { 
    css {
      width = 32.px
      height = 20.px

      and(switchClasses.thumb) {
        width = 14.px
        height = 14px
      }

      // props
  }
}

Clue 2 - style tag - details

Other options probably need some additional helpers