Я пытаюсь использовать компоненты https://material-ui.com/ внутри теневого домена, и мне нужен способ внедрить эти стили в теневой дом. по умолчанию material-ui, который использует jss под капотом, вводит стили в заголовок страницы.
Это вообще возможно? Кто-нибудь может привести пример?
Так выглядит мой веб-компонент. Это веб-компонент, который отображает приложение React, содержащее стили material-ui.
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 на фактический корень реакции внутри теневого корня укажет jss на вставку этих стилей в этот теневой корень.
Используя https://github.com/Wildhoney/ReactShadow для создания теневого домена (вы также можете сделать это с помощью hand, как показано в предыдущем ответе), я создал небольшой компонент WrapperComponent, который инкапсулирует логику.
import root from 'react-shadow';
import {jssPreset, StylesProvider} from "@material-ui/styles";
import {create} from 'jss';
import React, {useState} from "react"
const WrappedJssComponent = ({children}) => {
const [jss, setJss] = useState(null);
function setRefAndCreateJss(headRef) {
if (headRef && !jss) {
const createdJssWithRef = create({...jssPreset(), insertionPoint: headRef})
setJss(createdJssWithRef)
}
}
return (
<root.div>
<head>
<style ref={setRefAndCreateJss}></style>
</head>
{jss &&
<StylesProvider jss={jss}>
{children}
</StylesProvider>
}
</root.div>
)
}
export default WrappedJssComponent
Затем вам просто нужно обернуть ваше приложение или часть вашего приложения, которую вы хотите затенять, внутри <WrappedJssComponenent><YourComponent></YourComponent></WrappedJssComponenent>.
Будьте осторожны, некоторые компоненты пользовательского интерфейса материала не будут работать как обычно (у меня были проблемы с
