MuiDialogs, MuiPopover etc.. (Datepickers etc) with ShadowDom

[BastianMa]

I've just figured out how to use MaterialUi Datepickers (MuiDialogs) with ShadowDom enabled and just want to leave some examplecode here: direflow version 3.4.6

export default DireflowComponent.create({
    component: App,
    configuration: {
        tagname: 'myDireflowComponent',
        useShadow: true
    },
    plugins: [
        {
            name: 'material-ui'
        }
    ]
});

...
interface AppProperties {
    unique_component_id: string;
    ...
}

let theme: any;

const App: FC<AppProperties> = (props: AppProperties) => {

    const [themeInitialized, setThemeInitialized] = useState<boolean>(false);

     useEffect(() => {

        const componentId = `#${props.unique_component_id}_webcomponent`;
        const { shadowRoot } = document.querySelector<any>(`${componentId}`);

        const direflowStylesElement = shadowRoot.getElementById('direflow_material-ui-styles');
        const mountPoint = document.createElement('span');
        const dialogPortal = direflowStylesElement.appendChild(mountPoint);

        theme = createMuiTheme({
            overrides: {
                MuiButton: {
                    label: {
                        fontFamily: '"Fira Sans", Arial, sans-serif',
                        textTransform: 'none',
                        fontWeight: 300,
                        fontSize: 16
                    }
                }
            },
            props: {
                MuiPopover: {
                     container: (): any => {
                        return dialogPortal;
                    }
                },
                MuiDialog: {
                    container: (): any => {
                        return dialogPortal;
                    }
                }
            }
        });
        setThemeInitialized(true)
    }, []);

    return (
      <React.Fragment>
          {themeInitialized &&
           <MuiThemeProvider theme={theme}>
               <MuiPickersUtilsProvider utils={MomentUtils}}>
                   <DateTimePicker
                        .....
                   />
               </MuiPickersUtilsProvider>
           </MuiThemeProvider>
          }
      </React.Fragment>
    ) ;
}

[BastianMa]

maybe its the same effect like this https://direflow.io/guides-and-tips#tips-for-material-ui

[SimonHoiberg]

Great, thanks for sharing this! We'll go through your example and add this to the webpage 💪

[BastianMa]

updated the code with const [themeInitialized, setThemeInitialized] = useState(false) ....

[SimonHoiberg]

@BastianMa if you want to add it to the docs, our webpage is open-source as well :smile: That would be super cool! direflow-docs

[BastianMa]

known issue: doesnt work with shadowdom, if u use multipe same webcomponents on same page. Changing queryselector for webcomponent to unique id doesnt change things. I think thats an issue with the material-ui-plugin. JSS-Styles are not applied to second webcompnent