Hi everyone.

I've been digging into IDOM for a week or so and went through all the documentation to learn how to use it. All seem very promising, since we can import JS libraries such as Material UI. Documentation on this is a bit short (understandably) and don't show how to properly nest different components, and I'm trying to figure out what I'm doing wrong.

Let me explain.

I saw a post from @rmorshea in Dev where he showed how to implement custom JS components (from MUI in this case), and in the example he showed how to import the 'Slider' component from MUI. Had to tweak the code given in the example since idom.install() does not work anymore, so I'm using web.module_from_template() instead and seems to work as I'm able to pull the Slider container from MUI and works.

This kicked off my curiosity so I went to MUI's website to find other examples of the Slider component and see if I could make them work. So far I managed to set different configurations in the Slider.

My problem is, in the examples (code) they have the Slider component inside a Box component. I've been trying to surround a Slider in a Box component, but when I do, the Slider does not render anymore. I get no errors on my Terminal, and the server runs, so I'm not sure whether I don't know how to bring certain components, or I'm not nesting them the right way. So, any help or guidance will be appreciated.

My code looks like this at the moment:

import idom
from idom import web, html, use_state
mui = web.module_from_template(
 "react@^17.0.0",
 "@material-ui/core@4.12.4",
)
Box = web.export(mui, "Box")
Slider = web.export(mui, "Slider")
def valuetext(value):
 return "{}°C".format(value)
@idom.component
def SliderComponentMui():
 value, set_value = use_state([20, 70])
 
 def handle_change(event, newValue):
 set_value(newValue)
 
 return html.div(
 {
 "className": "slider-container",
 "style": {
 "width": "30%",
 "margin": "0 auto",
 "margin-top": "10%",
 },
 },
 Slider(
 {
 "defaultValue": 50,
 "step": 1,
 "min": 0,
 "max": 100,
 "aria-labelledby": "label",
 "aria-label": "Default",
 "valueLabelDisplay": "on",
 },
 ),
 Slider(
 {
 "getAriaLabel": lambda value: "Temperature range {}".format(value),
 "value": value,
 "onChange": handle_change,
 "valueLabelDisplay": "auto",
 "getAriaValueText": valuetext,
 },
 ),
 )

If I try to use the Box and surround the Sliders in it, then the Sliders stop rendering (doesn't even show when I inspect the html)

I saw other components (Card, Drawer, etc) and they all seem to have nested components. So I'll face the same issue when trying to implement them.

Thanks in advance.