嵌入式 React + JSS 组件：如何保护像 <button>、<p> 这样的通用元素不被包含页面的样式？

Question

我有一个嵌入在其他网页中的 React 组件（即通过扩展或作为第三方嵌入工具）。

它的大多数样式类都是使用 JSS 创建的，并且这些类会获得唯一的类名，这些类名不能被包含页面覆盖。

然而，我们的一些元素是通用元素（例如<p>、<button>、<h1>、<h2>等），出于可访问性的原因我们必须使用它们（例如屏幕阅读器需要<hX>分层标题，并且很难避免使用buttons）。如果此页面为这些元素使用元素选择器，则这些元素的样式通常会被包含页面的样式覆盖。

我尝试使用 Shadow DOM 封装 React 组件，但这似乎很重要，主要是因为它似乎阻止了 React 正常运行（未传递单击事件等）。react-shadow（https://github.com/Wildhoney/ReactShadow）似乎也不起作用。

有没有办法保护这些元素的样式不被覆盖？

Answer 1

很简单，使用all: unset

.react-root {
  all: unset;
}