我喜欢你>_<

一句话摘要#

这次排查确认了一个关键点：在小程序富文本场景里，单靠 scoped + CSS 穿透不稳定，tag-style 才是可控且跨端一致的方案。

目录#

• 一句话摘要
• 目录
• 背景与现象
  • 本章小结
• 根因分析
  • 本章小结
• 方案对比与选择
  • 本章小结
• 落地计划
  • 本章小结
• 总结

背景与现象#

在 .rich-text-content 里写了自定义样式，但运行后看起来“加不加样式都一样”，富文本区域没有被影响。

根因分析#

1. 页面里使用了 <style lang="scss" scoped>，scoped 样式默认无法作用到子组件内部渲染出来的真实节点。
2. uv-parse 的富文本最终由内部组件渲染（如 node.vue / rich-text），外层容器 .rich-text-content 的 CSS 只会影响容器本身，不会自然影响到内部的 p / span / img 等元素。
3. 即使尝试 :deep(.uv-parse)，也可能仍不生效：
   • uv-parse 内部会用带下划线前缀的类名（如 ._p、._h1），不是直接的 p/h1 标签样式。
   • 小程序端不少内容走原生 rich-text 渲染，CSS 穿透对原生组件经常不稳定或失效。

方案对比与选择#

• 方案 A：用 ::v-deep / /deep/ / >>> 做样式穿透（改动小，但端上不一定稳定，且要对准 uv-parse 内部类名）。
• 方案 B：用 uv-parse 的 container-style 传入容器内联样式（适合改整体容器）。
• 方案 C（最终推荐）：用 uv-parse 的 tag-style 给特定标签注入内联样式（最稳定、影响面最小）。

最终推荐 tag-style：解析时把样式直接写到节点上，不依赖 CSS 穿透。

优点：

• 样式直接注入到 HTML 节点，优先级高
• 只影响当前这个 uv-parse 实例（不会污染全局）
• 小程序/H5/App 兼容性更好

落地计划#

修改 detail.vue：

• 在 data() 增加 parseTagStyle（为 p/img/h1... 等标签定义内联样式）
• 在 <uv-parse> 上绑定 :tag-style="parseTagStyle"

总结#

这次排查再次说明：富文本问题往往不是“CSS 写错了”，而是“渲染边界没看清”。以后遇到类似问题，我会优先确认渲染链路，再决定是用样式穿透还是组件能力。