Using MUI-styled apprun component in WebComponent (with shadow DOM)

[jow1]

Hi,

I´m using apprun in a React+Typescript application. I want to build WebComponents that make use of apprun along with React as a rendering engine. The surrounding React app starts the internal apprun component. Inside the apprun component I´m using MUIv5 components, styled with a MUI theme.

However, I´m unable to support MUIv5 styling in my internal apprun component.

As soon as I use an apprun component in a shadow DOM (WebComponent) (example 2), the styles are not longer available. In a common apprun project setup without a shadow DOM (and without a WebComponent) (example 1) it works perfectly.

example 1:

example 2:

I attached source code, which contains a closer description of the problem. The top view shows the expected result (example 1) and the bottom view is the achieved result (example 2).

source code: AppRunMuiExample.tar.gz

Thx for your help.

[yysun]

You can convert the AppRun Component to React component and use in the web component directly. The fix is attached. src.zip

BTW, two more tips:

• I added a style to div#content-area to stack the two examples vertically.
• And lastly, you can start the component on an element. No need to mount then fire a start event.