MUI components lose default styling inside an Iframe

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

MUI components don't have default styling inside an iframe.

Expected behavior 🤔

MUI components look the same inside an iframe as they look outside an iframe

Steps to reproduce 🕹

codesandbox

Context 🔦

I am trying to utilize mui components inside and iframe using a React portal to achieve DOM isolation from the rest of the application.

Your environment 🌎

System:
OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
Binaries:
Node: 16.13.1 - /usr/bin/node
Yarn: 1.22.15 - /usr/bin/yarn
npm: 8.3.0 - /usr/bin/npm
Browsers:
Chrome: 96.0.4664.110
Firefox: 95.0.1
npmPackages:
@emotion/react: ^11.7.1 => 11.7.1
@emotion/styled: ^11.6.0 => 11.6.0
@mui/base: 5.0.0-alpha.60
@mui/material: ^5.2.4 => 5.2.4
@mui/private-theming: 5.2.3
@mui/styled-engine: 5.2.4
@mui/system: 5.2.4
@mui/types: 7.1.0
@mui/utils: 5.2.3
@types/react: 17.0.37 => 17.0.37
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
typescript: ^4.5.2 => 4.5.2

Start with the linked CodeSandbox reproduction and the React portal setup described in the issue; compare MUI component rendering inside and outside the iframe. Done means MUI components retain their default styling inside the iframe as they do outside it.