Help with Material-UI Javascript to Kotlin code

JavaScript
1

Hi,

I am trying to convert the code below from Material-UI to Kotlin so I can use it in my Muirwik project, as I want to be able to position the inserted styles from Material UI before the styles from Styled components so styles reliably apply.

I am not quite sure how to proceed, especially with the spread operator.

Any help, guidelines appreciated.
Thanks
C

import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

const generateClassName = createGenerateClassName();
const jss = create({
  ...jssPreset(),
  // We define a custom insertion point that JSS will look for injecting the styles in the DOM.
  insertionPoint: 'jss-insertion-point',
});

function App() {
  return (
    <JssProvider jss={jss} generateClassName={generateClassName}>
      ...
    </JssProvider>
  );
}

export default App;
2

OK,

The following seems to work. Instead of using the spread operator which is used to initialise the js object with multiple objects/properties, it just creates the presets from the jssPreset import first, then adds the other properties to the js object (i.e. the insertionPoint is added to the dynamic presets object).

Not sure how often it will get called, or the cost of the jssModule.create… my version creates it on each render, the original creates it as a const before the render is called… but it works.

Shown below just for reference in case anyone stumbles across this via a web search…

import react.RBuilder
import react.RHandler
import react.RProps
import react.ReactElement

@JsModule("react-jss/lib/JssProvider")
private external val jssProviderModule: dynamic

@JsModule("jss")
private external val jssModule: dynamic

@JsModule("@material-ui/core/styles/createGenerateClassName")
private external val createGenerateClassName: dynamic

@JsModule("@material-ui/core/styles/jssPreset")
private external val jssPresetModule: dynamic

private val generateClassName = createGenerateClassName.default()
private val presets = jssPresetModule.default()

fun RBuilder.jssProvider(handler: RHandler<RProps>): ReactElement {
    presets.insertionPoint = "jss-insertion-point"
    val jss = jssModule.create(presets)

    val props = js("({})")
    props.jss = jss
    props.generateClassName = generateClassName

    return child(jssProviderModule.default as Any, props, handler)
}