如何使用cssinjs/jss在阴影根内部安装样式

问题描述

我正在尝试在阴影dom内使用 https://material-ui.com/组件，并且需要一种将这些样式注入阴影dom内的方法.默认情况下，material-ui(使用引擎盖下的jss)在页面顶部注入样式.

I'm trying to use https://material-ui.com/ components inside shadow dom, and need a way to inject those styles inside shadow dom. by default material-ui, which uses jss under the hood injects styles in the head of the page.

那有可能吗?有人可以举一个例子吗?

Is that even possible? Can anyone come with an example?

推荐答案

这是我的Web组件的外观，它是一个Web组件，用于渲染包含材质UI样式的react应用.

This is what my web component looks like, it is a web component that renders a react app that contains material-ui styles.

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);

将jss上的insertionPoint设置为影子根内部的实际react根，将告诉jss将这些样式插入该影子根中.

Setting the insertionPoint on jss to the actual react root inside the shadow root will tell jss to insert those styles inside that shadow root.

这篇关于如何使用cssinjs/jss在阴影根内部安装样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！