Material UI Import · reactive-python/reactpy · Discussion #299

JennaSys
Feb 26, 2021

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.

Answered by rmorshea

Feb 26, 2021

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.

View full answer

Replies: 1 comment 5 replies

rmorshea
Feb 26, 2021
Maintainer

5 replies

@JennaSys

JennaSys Feb 26, 2021
Author

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

rmorshea Feb 26, 2021
Maintainer

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

StokeMasterJack Feb 26, 2021

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

@rmorshea

rmorshea Feb 26, 2021
Maintainer

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...",
 }
}