Material UI Import

[JennaSys]

Expanding on the Material_UI example in the JS Component section of the docs, the MUI components like Button or Typography work, but accessing non-component features like colors or styled do not.

I'm using this import:

material_ui = idom.install("@material-ui/core", fallback="loading...")

And trying to do things like this:

theme = material_ui.styles.createMuiTheme({
    'palette': {
        'primary': material_ui.colors.teal,
        'secondary': material_ui.colors.pink,
    }
})

StyledButton = material_ui.styled(material_ui.Button)({
    'minWidth': '6rem',
    'margin': '0 0.5rem 0 0',
    '&:hover': {'backgroundColor': theme.palette.secondary}
})

Since colors and styled end up as type Import they don't have the methods or properties I am trying to access. Is there something else that needs to be done import-wise or adding an intermediate step to make these work? It seems I may be missing a piece of the puzzle.

I'm essentially trying to get an IDOM equivalent of this:

import { styled } from '@material-ui/core/styles';

but trying to idom.install() from anything other than the @material-ui/core base gives an error.

[rmorshea]

Unfortunately, as you've discovered, idom.install is not magic, and these are some of its fundamental limitations - all it does is install the package, give you access to any components it exports, and allows you to pass those components basic props.

For a fully functional implementation of all Material UI's features you'd need to create a wrapper for the JS library using this template repository: https://github.com/idom-team/idom-react-component-cookiecutter. I'd be excited to help advise on such a project.

[JennaSys]

Got it. I was wondering if that might be the case.

Cookiecutter is new to me, but I'll check it out. This is a really cool project and if I can wrap my brain around how it all works I'd be happy to contribute where I can.

[rmorshea]

If you have more questions about how to get set up with the repo template, or more question about how IDOM works, just continue to start more discussions. Like I said, I'm happy to help in any way I can.

[StokeMasterJack]

Question: Are material UI components running on the server-side?

[rmorshea]

No, they're running client-side. The server constructs a representation of the view and sends it over for the client to render. For example, to render a Material UI button like this:

<Button style={{"color": "primary", "variant": "contained"}} >Hello World!"</Button>

IDOM would communicate the following to the client for it to interpret:

{
    "tagName": "Button",
    "children": ["Hello World!"],
    "attributes": {"style": {"color": "primary", "variant": "contained"}},
    "importSource": {
        "source": "url/to/@material-ui/core.js"
        "fallback": "loading...",
    }
}

A mostly complete description of the spec is here: http://idom-docs.herokuapp.com/docs/specifications.html

Unfortunately the importSource key is not documented yet. I've created an issue to track that though: #304

[rmorshea]

I wrote an article that describes the architecture at a very high level: https://rmorshea.github.io/articles/2021/idom-react-but-its-python/article/#virtual-document-object-model: