google-chrome-extension - 如何使用 cssinjs/jss 在 shadow root 中挂载样式

Question

我正在尝试使用 https://material-ui.com/ shadow dom 中的组件，并且需要一种将这些样式注入(inject)到 shadow dom 中的方法。默认 material-ui , 它使用 jss under the hood 在页面头部注入(inject)样式。

这甚至可能吗？任何人都可以举个例子吗？

Answer 1

这就是我的 Web 组件的样子，它是一个 Web 组件，它呈现一个包含 Material-ui 样式的 React 应用程序。

import * as React from 'react';
import { render } from 'react-dom';
import { StylesProvider, jssPreset } from '@material-ui/styles';
import { create } from 'jss';

import { App } from '@myApp/core';

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

    render(
      <StylesProvider jss={jss}>
        <App />
      </StylesProvider>,
      mountPoint
    );
  }
}
customElements.define('my-web-commponent', MyWebComponent);

设置 insertionPoint在 jss 上到 shadow root 内的实际 react root 将告诉 jss 将这些样式插入到该 shadow root 中。