Angular ngStyle绑定背景色未应用全局样式表自定义色值问题

你通过[ngStyle]绑定的是DOM内联样式，当colorIndicatorColor返回值为yellow时，浏览器会直接按照W3C标准内置的CSS颜色关键字解析，渲染为标准默认黄色#FFFF00，完全不会读取你全局样式表中自定义的Yellow色值配置。
CSS本身不支持覆盖原生颜色关键字的默认解析规则，你在全局样式表中给Yellow配置的#FFCB14，仅在全局样式表自身的CSS规则、你自定义的CSS类中生效，无法干预内联样式中直接传入原生颜色关键字时的浏览器解析逻辑。

• 方案1：直接绑定目标十六进制色值
  调整颜色配置存储逻辑，不要让project.colorIndicator?.colorIndicatorColor返回yellow这类颜色关键字，直接在配置映射中将Yellow选项对应的值存储为#FFCB14，ngStyle直接拿到目标色值渲染，不会出现解析偏差。
• 方案2：改用ngClass绑定样式类
  把全局配置的所有颜色拆分为独立CSS类，和全局配置保持一致：

  .indicator-yellow {
    background-color: #FFCB14;
  }
  /* 其余颜色类按相同规则定义 */
  

  模板中改为动态绑定样式类，完全走全局样式表规则：

  <div [ngClass]="'indicator-' + project.colorIndicator?.colorIndicatorColor"></div>
  

  后续调整色值只需要修改全局CSS类，所有引用位置会自动同步。
• 方案3：组件层加颜色映射转换
  如果暂时不方便调整存储逻辑和样式写法，可以在组件TS侧维护一份和全局样式一致的颜色映射表，绑定前做值转换：

  // 和全局样式配置完全对齐的颜色映射
  const CUSTOM_COLOR_MAP: Record<string, string> = {
    yellow: '#FFCB14',
    // 其余颜色按配置补充
  }
  
  get indicatorBgColor() {
    const colorVal = this.project.colorIndicator?.colorIndicatorColor
    return CUSTOM_COLOR_MAP[colorVal] ?? colorVal
  }
  

  模板中绑定转换后的值即可：

  <div [ngStyle]="{'background-color': indicatorBgColor}"></div>
  

提示：不要尝试通过CSS全局覆盖原生颜色关键字，所有现代浏览器解析内联样式中的原生颜色关键字时，都会直接读取内置标准色值，不会受自定义CSS规则影响。

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