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.