小程序中rich-text的css样式不可控，必须通过mp-html的tag-style注入内联样式或用parse钩子动态处理节点。
rich-text 传字符串时样式完全不可控，别试了
直接给 <rich-text></rich-text> 的 nodes 属性传字符串（比如 v-html 那种写法），小程序端所有 CSS 都会被忽略。这不是 bug，是平台限制 —— 小程序渲染层不解析外部样式，也不支持内联 style 属性生效（除极少数白名单属性如 color、font-size）。
所以，想靠 <rich-text> + class="xxx"></rich-text> 或外部 .xxx p { ... } 控制内部段落/图片样式，基本无效。必须把样式“塞进”节点结构里，或换更可控的方案。
mp-html 插件中用 tag-style 注入全局样式规则
mp-html 是目前 uni-app 小程序端最稳的富文本方案，它提供 tag-style 配置项，允许你为特定 HTML 标签指定默认样式对象，效果等同于给每个匹配标签加 style 属性，且优先级高于原始 HTML 中的 inline style（会被自动 strip）。
-
tag-style接收一个对象，key 是标签名（如"p"、"img"、"h2"），value 是样式对象，例如：{ "p": { "margin": "16rpx 0", "line-height": "1.6" }, "img": { "max-width": "100%", "height": "auto", "display": "block", "margin": "12rpx auto" } } - 注意：rpx 单位在小程序中有效，但不要写
!important—— 它会被忽略 - 如果后端返回的
<img>带了width="600"或style="max-width:90%"，mp-html默认会清除这些属性，再应用tag-style，所以无需额外正则清洗 - 不支持伪类（如
:hover）、媒体查询、CSS 变量（var(--x)），只认基础样式键值对
需要局部动态变色？用 data- 属性 + parse 钩子劫持节点
如果某段富文本要根据用户操作实时变色（比如高亮关键词、切换深色模式），不能靠外部 class 切换，得在解析阶段注入动态样式。
mp-html 提供 parse 钩子，可在 HTML 转 nodes 过程中修改每个节点：
- 检查节点
node.attrs["data-highlight"] === "true"，就给它的attrs.style加上color: #ff6b35 - 后端返回时带上自定义属性：
<p data-highlight="true">这段要高亮</p> - 钩子里处理示例：
parse(node) { if (node.name === 'p' && node.attrs?.['data-highlight'] === 'true') { node.attrs.style = (node.attrs.style || '') + ';color:#ff6b35;' } } - 避免在钩子里做 heavy 计算，否则影响首屏渲染速度
图片宽高错乱？别信后端给的 width/height，全清掉
后端 CMS 输出的富文本里，<img> 经常带固定像素宽高（如 width="800"），在小程序里会导致溢出、拉伸变形，且 mp-html 默认不清除它们 —— 必须手动干预。
两个可靠做法：
- 在传给
mp-html前预处理 HTML 字符串：html.replace(/(width|height)="[^"]*"/gi, '')，再交给组件 - 或启用
mp-html的lazy-load+img-mode="aspectFit"，配合tag-style.img强制max-width: 100%和height: auto - 绝对不要依赖
<img>的原始style，小程序对它的解析极不稳定，尤其是含百分比或 calc() 的值
真正起效的永远是 tag-style 里写的那几行，以及组件内部对 img 的 layout 处理逻辑 —— 其他都是幻觉。
