如何让reset.css不作用于指定单个元素或React组件？

你之前尝试的.unset * {all: unset}方案无法达到预期，核心原因是all: unset只会把元素属性重置为CSS规范定义的初始值/可继承值，不会加载浏览器内置的User Agent默认样式表，自然不可能还原h1、列表、strong这类标签的原生外观。

方案1：作用域内补全默认样式（最推荐，兼容性最好） #

这是生产环境最常用的方案：给Portable Text的渲染容器加专属类名（比如.rich-text-container），只在这个类的作用域下补全富文本常用标签的默认样式即可。由于Portable Text输出的标签类型是可枚举的，实际需要写的代码量非常小，还能统一不同浏览器下的默认样式差异。
示例代码：

.rich-text-container {
  line-height: 1.6;
  word-break: break-word;
}
/* 标题默认样式 */
.rich-text-container h1 {
  display: block;
  font-size: 2em;
  font-weight: 700;
  margin: 0.67em 0;
}
.rich-text-container h2 {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.83em 0;
}
.rich-text-container h3 {
  display: block;
  font-size: 1.17em;
  font-weight: 700;
  margin: 1em 0;
}
.rich-text-container p {
  display: block;
  margin: 1em 0;
}
/* 列表默认样式 */
.rich-text-container ul {
  display: block;
  list-style: disc;
  margin: 1em 0;
  padding-inline-start: 40px;
}
.rich-text-container ol {
  display: block;
  list-style: decimal;
  margin: 1em 0;
  padding-inline-start: 40px;
}
.rich-text-container li {
  display: list-item;
}
/* 行内元素默认样式 */
.rich-text-container strong {
  font-weight: 700;
}
.rich-text-container em {
  font-style: italic;
}
.rich-text-container a {
  color: #0000ee;
  text-decoration: underline;
  cursor: pointer;
}

你可以根据自己项目里Portable Text实际配置的自定义类型，按需增减对应样式即可。

方案2：使用all: revert回滚样式（写法最简单） #

如果你的项目不需要兼容Chrome 84以下、Firefox 67以下、Safari 15.4以下的旧版本浏览器，可以直接用revert关键字替代unset，这个值的作用就是把元素属性直接回滚到浏览器User Agent样式表定义的默认值，刚好匹配你的需求。
代码非常简洁：

.rich-text-container * {
  all: revert;
}
/* 可按需补充容器全局排版规则 */
.rich-text-container {
  line-height: 1.7;
}

如果你的全局reset选择器优先级比较高，可以适当提升上述规则的优先级，比如把选择器写成.rich-text-container.rich-text-container *叠加权重即可。

方案3：Shadow DOM做完全样式隔离 #

如果你希望富文本区域完全不受外部全局样式影响，可以把Portable Text的渲染结果挂载到Shadow DOM内部，Shadow DOM天然和外层文档的样式隔离，全局reset规则根本不会穿透进去，内部元素会直接使用浏览器默认样式渲染。
React生态有很多现成的Shadow DOM容器组件可以直接用，只需要把Portable Text的渲染节点作为子组件传入即可。需要注意的是Shadow DOM内部的事件冒泡、样式继承逻辑和普通DOM有差异，如果你的富文本包含自定义交互组件，需要单独适配逻辑。

不要修改全局reset规则，通过:not()伪类排除富文本容器下的元素，比如把reset选择器改成*:not(.rich-text-container *)，这种写法会大幅降低CSS选择器的匹配性能，后续维护时也很容易出现样式遗漏、污染的问题。

内容的提问来源于stack exchange，提问作者Koray Aydemir