MUI v5 样式表自定义挂载点答案

【问题标题】：MUI v5 stylesheets custom mount pointMUI v5 样式表自定义挂载点
【发布时间】：2022-07-10 22:03:11
【问题描述】：

我正在尝试在 chrome 扩展中使用 Shadow Dom。如果我将我的应用程序包装在 Shadow Dom 中，它就没有 mui 样式（它们被添加到 head - 这在 Shadow Dom 中不可用）。

我想以某种方式指出应该安装 mui css 样式的位置。

我能在网上找到的所有信息都来自以前的版本，似乎不起作用。

【问题讨论】：

标签： reactjs material-ui shadow-dom

【解决方案1】：

MUI 使用 @emotion 库来使用 JavaScript 编写 CSS 样式。 MUI 将所有styles 注入head，因此您必须将这些样式注入Shadow Dom 中的目标元素而不是head。

安装 @emotion/cache 和 @emotion/react 以将 MUI 样式注入目标元素。

?代码示例：

import React from 'react';
import App from './App.jsx';
import createCache from '@emotion/cache';
import { CacheProvider } from '@emotion/react';

function AppContainer() {
    let cashCache = createCache({
        key: 'shadow-dom-css',
        prepend: true,
        container: document
            .getElementById('shadow-dom-root')
            .shadowRoot.querySelector('#emotion-styled-container'),
        speedy: false,
    });
    
    return (
        <CacheProvider value={cashCache}>
            <App />
        </CacheProvider>
    );
}

export default AppContainer;

欲了解更多信息：https://mui.com/material-ui/guides/shadow-dom/

【讨论】：