Используя https://github.com/Wildhoney/ReactShadow для создания shadow dom (вы также можете сделать это вручную, как shonw в предыдущем ответе), я создал небольшой 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>.
Будьте осторожны, некоторые компоненты материала-пользовательского интерфейса выигралине работает как обычно (у меня были некоторые проблемы с
- ClickAwayListener, возможно, потому что он использует родительский домен, не исследовал больше, чем это, чтобы быть честным.
- Поппер, и всекоторый попытается использовать document.body, так как контейнер не будет иметь доступа к jss, определенному в теневом узле. Вы должны задать элемент внутри теневого домена как контейнер.