一次“必填星号不变红”的前端样式排障复盘

背景

在一个 Vue 3 + Ant Design Vue 的业务系统中，我们希望将所有表单必填项前的星号（*）统一改为红色。

看起来这是一个非常简单的样式修改：

把必填星号的颜色设成红色
刷新页面验证

但实际现象是：

样式代码已经改了
强刷页面无效
换浏览器也无效
星号依然显示为黑色

这篇文章记录完整排查过程和最终根因，供类似问题快速定位参考。

问题现象

目标：将系统内所有必填星号统一为红色。

已做过的修改（早期尝试）：

修改全局必填样式
修改通用 .required-sign 样式
在组件里使用 !important

结果：页面上仍看到黑色星号。

第一步：确认星号来源并不只有一种

排查后发现项目里“必填星号”有两类来源：

Ant Design Vue 自动渲染的必填星号（label 的 ::before）
业务代码手写的星号（.required-sign）

也就是说，如果只改一种来源，另一种仍可能保持旧颜色。

关键位置：

第二步：为什么明明改成红色，页面还是黑色？

真正的根因在全局主题覆盖。

在以下文件中存在一条高优先级样式：

src/design/theme.less

核心规则是：

-webkit-text-fill-color: #111 !important;

这条规则挂在弹窗/抽屉的容器层（如 .ant-modal、.ant-drawer）上，会对容器内文本产生“强制填充色”效果。即使子元素写了 color: red，也可能被 text-fill 视觉覆盖成黑色。

这就是“改了不生效、刷新和换浏览器都不生效”的关键原因。

第三步：最终修复方案

修复思路：

不仅覆盖 color
还要同时覆盖 -webkit-text-fill-color
同时覆盖两类星号来源（自动必填 + 手写必填）

最终在以下文件增加统一规则：

src/design/theme.less

示例修复：

.ant-form-item-label > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before,
.ant-form-item-label > label.ant-form-item-required-mark::before,
.ant-form-item-required-mark,
.required-sign {
  color: #ff4d4f !important;
  -webkit-text-fill-color: #ff4d4f !important;
}

另外，为了统一全项目，之前也同步调整了：

经验总结

样式“看起来不生效”时，不要只盯着当前选择器优先级

还要检查是否存在以下“隐藏覆盖者”：

filter / opacity
mix-blend-mode
-webkit-text-fill-color
上层容器强制主题色

先分类“视觉元素来源”，再统一治理

像“必填星号”这种小元素，经常同时存在：

组件库自动生成
业务手写 DOM

必须两边都纳入，才能做到真正统一。

统一主题时，尽量谨慎使用全局 text-fill 强覆盖

它在做玻璃态或主题统一时很方便，但副作用是会让局部强调色（如错误红、告警黄）失真。

建议：

仅在必要区域使用
或提前定义好语义色白名单（error/warning/success）

可复用排查清单（Checklist）

确认 UI 元素的实际 DOM 和伪元素来源
全局搜索同类选择器（含 :before / ::before）
检查容器级强制色规则（尤其是 -webkit-text-fill-color）
同时验证 color 与 text-fill
校验弹窗、抽屉、主页面三个场景
校验自动生成元素与手写元素两类来源

结语

这次问题本质不是“样式没改对”，而是“被更上层的强制 text-fill 机制覆盖”。

当你遇到“颜色怎么都改不动”的问题时，记得把 -webkit-text-fill-color 放进第一批怀疑对象里，通常能少走很多弯路。

一次“必填星号不变红”的前端样式排障复盘