Help with Panel + React + MaterialUI

Hello, I’m trying to combine Panel + React v18 + MaterialUI as shown below, but the result is a button with plain HTML style instead of a Material styled button (see screenshot at the end). What am I missing in the code below to get it right?

import panel as pn
import param

pn.extension()

class Hello(pn.reactive.ReactiveHTML):
    clicks = param.Number(default=0)
    
    _template = """<div id="mywidget"></div>"""
    
    _scripts = {
        "render": """
            const root = ReactDOM.createRoot(mywidget);
            root.render(
                React.createElement(
                    MaterialUI.Button, {
                        variant: "contained", 
                        color: "primary", 
                        children: "Hello", 
                        onClick: () => {data.clicks = data.clicks + 1}
                    }
                )
            )
        """,
    }

    __javascript__ = [
        "https://unpkg.com/react@latest/umd/react.development.js",
        "https://unpkg.com/react-dom@latest/umd/react-dom.development.js",
        "https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
    ]

Hello()

OK, the code above works. I had to shut down the Jupyter Notebook server and then try again.

2 Likes