Material ui inside shadow dom 缺少后续调用 webcomponent 的样式

Question

我们有一个用 Material-ui 用 React 编写的 Web 组件。此 Web 组件将用于 angular 应用程序。

最初我们遇到了一个问题，即 material 样式未应用于阴影 dom 内的元素。所以我们按照这里给出的解决方案： 使用 StylesProvider 并将 jss 的插入点设置为阴影内的元素 dom.

此解决方案适用于我们首次调用 Web 组件。但是在 angular 托管应用程序中，我们有代码来有条件地呈现此 Web 组件。当我们第一次渲染时，这个 webcomponent 渲染得非常好。我们看到所有需要的样式都在阴影 dom 内。 但是对于后续的渲染来说，这个css/styles的影子就不见了dom。知道如何解决这个问题吗？

Answer 1

在“@material-ui/core”：“^4.10.0”中，我能够通过在重新创建 Web 组件时为 StylesProvider 的 sheetsManager prop 传递“new Map()”来解决此问题。这是 hacky，但它似乎工作。

这是它的样子。