Sendgrid动态模板如何根据动态数据动态设置文本颜色？

失效原因 #

之前的写法不生效核心有两点：

• Sendgrid 动态模板基于 Handlebars 语法，双大括号{{}}默认会对传入值做HTML实体转义，且Sendgrid默认会对内联style属性中直接插入的普通模板变量做安全清洗，直接抹除变量替换逻辑。
• 部分老旧邮箱客户端会拦截动态拼接的内联样式属性，导致样式失效。

可行实现方案 #

优先选第一种，兼容性和可维护性最好：

• 方案1：样式块内定义动态样式（推荐）
  不要把动态变量直接写在内联style里，在模板头部的<style>标签中插入动态色值，用三重大括号{{{}}}跳过转义，避免被安全过滤器拦截：

<head>
  <style>
    .custom-color-text {
      color: {{{ colorHash }}};
    }
  </style>
</head>
<body>
  <p class="custom-color-text">Ciao {{{ username }}}</p>
</body>

这种写法支持所有传入的合法色值：十六进制、rgb、rgba、颜色关键字都可以，兼容99%以上的主流邮箱客户端。

• 方案2：内联样式改用RGB格式传值（兼容老旧客户端）
  如果需要兼容不支持头部style块的极老版本Outlook，就把后端传入的色值从#ddd这类十六进制格式转成rgb(221,221,221)格式的RGB字符串，同样用三重大括号插入内联样式：

<!-- 后端传入动态字段值示例："colorRgb": "rgb(221, 221, 221)" -->
<p style="color: {{{ colorRgb }}};">Ciao {{{ username }}}</p>

不带#的RGB色值不会触发Sendgrid的内联样式安全拦截，兼容性和十六进制色值完全一致。

• 方案3：固定状态色场景直接传类名（最稳定）
  如果业务场景只需要切换固定的几种状态色（比如成功绿、失败红、警告黄），完全不需要传完整色值，后端只需要传状态标识，模板里提前写好对应类的样式即可：

<head>
  <style>
    .text-success { color: #27ae60; }
    .text-danger { color: #e74c3c; }
    .text-warning { color: #f39c12; }
  </style>
</head>
<body>
  <!-- 后端传入动态字段值示例："statusClass": "success" -->
  <p class="text-{{{ statusClass }}}">Ciao {{{ username }}}</p>
</body>

这种写法完全不会触发安全过滤，是稳定性最高的实现方式。

注意事项 #

所有插入样式、不需要做HTML转义的动态字段，都要用三重大括号{{{}}}包裹，不要用双大括号，避免转义导致值异常。

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