相关疑难解决方法(0)

使用 @material-ui/core V4（确切地说是 4.12.3）我使用 webpack 和 babel 成功创建了一个自定义元素。我曾经使用@material-ui/core makeStyles 来设计它。现在我正在升级到 @mui/material v5 并希望使用 @mui/material 中的内置组件，但它们不会在自定义元素中显示样式。请注意，我需要这是一个自定义元素，因为它将集成到另一个托管应用程序中。

v4 之前的 index.tsx

import AppComponent from './App';
import { render } from 'react-dom';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
import { create } from 'jss';

class MyWebComponent extends HTMLElement {
    connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: 'open' });
        const mountPoint = document.createElement('custom-jss-insertion-point');
        const reactRoot = shadowRoot.appendChild(mountPoint);
        const jss = create({
            ...jssPreset(),
            insertionPoint: reactRoot,
        });

        render(
            <StylesProvider jss={jss}>
                <AppComponent />
            </StylesProvider>,
            mountPoint
        );
    } …