javascript - 嵌入式 React + JSS 组件 : how to protect generic elements like , 从获取包含页面的样式？

Question

我有一个嵌入在其他网页中的 React 组件(即通过扩展或作为第三方嵌入工具)。
它的大多数样式类都是使用 JSS 创建的，并且这些类具有唯一的类名，这些类名不能被包含页面覆盖。
然而，我们的一些元素是通用元素(例如 <p> 、 <button> 、 <h1> 、 <h2> 等)，出于可访问性原因我们必须使用它们(例如，屏幕阅读器需要 <hX> 分层标题，并且它很难避免使用 button s)。如果此页面对这些元素使用元素选择器，则这些元素的样式通常会被包含页面的样式覆盖。
我尝试使用 Shadow DOM 封装 React 组件，但这似乎并不简单，主要是因为它似乎阻止了 React 正常运行(未传递单击事件等)。 react-shadow ( https://github.com/Wildhoney/ReactShadow ) 似乎也不起作用。
有没有办法保护这些元素的样式不被覆盖？

Answer 1

很简单，用 all: unset

.react-root {
  all: unset;
}