Importing Material UI Button into KotlinJS create-react-kotlin-app

Adding the npm package dependency:

yarn add @material-ui/core

Usage in Javascript (ECMAScript):

import Button from 'material-ui/core/Button';
import PropTypes from 'prop-types';

const MyButton = ({ variant, color, href, disabled, text, onClick }) => {
  return (
    <Button
      variant={variant}
      color={color}
      href={href}
      disabled={disabled}
      onClick={onClick}
    >
      {text}
    </Button>
  );
};

MyButton.propTypes = {
  variant: PropTypes.string,
  color: PropTypes.string,
  href: PropTypes.string,
  disabled: PropTypes.string,
  text: PropTypes.string,
  onClick: PropTypes.func,
};

export default MyButton;

Defining basic button without Material UI in Kotlin:

import kotlinx.html.js.onClickFunction
import org.w3c.dom.events.Event
import react.RBuilder
import react.RProps
import react.child
import react.dom.button
import react.functionalComponent

private val myButton = functionalComponent<MyButtonProps> { props ->
    button {
        attrs {
            disabled = props.disabled
            onClickFunction = props.onClick
        }
        +props.text
    }
}

data class MyButtonProps(
    var variant: String = "",
    var color: String = "",
    var href: String = "",
    var disabled: Boolean = false,
    var text: String = "",
    var onClick: (Event) -> Unit = {}
) : RProps

fun RBuilder.myButton(props: MyButtonProps.() -> Unit) = child(myButton, MyButtonProps().apply(props))

danherrera/Kotlin React Importing Material UI Button.md