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()
