Document how to use MaterialUI with ReactiveHTML

[MarcSkovMadsen]

With Panel 0.x it was possible to use `ReactiveHTML´ with MaterialUI. See

MaterialUI is the most popular React design framework. If its not possible to use with ReactiveHTML then I don't think its a great idea to recommend using React with ReactiveHTML.

I can't get it working with Panel 1.x. It appears to me that the use of ShadowDOM and CDN in Panel is the issue. See https://mui.com/material-ui/guides/shadow-dom/ and mui/material-ui#29568

import panel as pn
import param

pn.extension()

class MUIButton(pn.reactive.ReactiveHTML):
    clicks = param.Number(default=0)
    
    _template = """<style id="emotionRoot"></style><div id="mywidget"></div>"""
    
    _scripts = {
        "render": """
            const {
                cache
            } = createEmotion({
                key: 'css',
                prepend: true,
                container: emotionRoot,
            })
            const {CacheProvider}=emotionReact
            const button = React.createElement(
                MaterialUI.Button, {
                    variant: "contained", 
                    color: "primary", 
                    children: "Hello", 
                    onClick: () => {data.clicks = data.clicks + 1}
                }
            )
            const root = ReactDOM.createRoot(mywidget);
            root.render(
                React.createElement(CacheProvider, {value: cache}, button)
            );
        """,
    }

    __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",
        "https://unpkg.com/@emotion/react@11.10.0/dist/emotion-react.umd.min.js",
        "https://unpkg.com/@emotion/css@11.10.0/create-instance/dist/emotion-css-create-instance.umd.min.js"
    ]

MUIButton().servable()

In my example I guess one issue is that emotion is loaded both inside mui and seperately. I've done this for now as I can find no way to load the createCache function without it. And it seems key to a solution.

Preact + htm

It would be a bonus if it could documented how to use it with Preact+htm too, because then we could recommend using that combination too.

[philippjfr]

Running into the again playing with ESM, seems like this is a general issue loading Mui from a CDN, nothing specific to Panel. Still quite frustrating though.