通过AWS Lambda配置Cognito验证邮件：<style>标签失效问题

核心原因 #

绝大多数邮件客户端（如Gmail、Outlook）对HTML邮件的样式支持存在限制，不支持<style>标签内的类选择器样式，仅认可元素的内联style属性。同时Amazon Cognito在处理自定义邮件模板时，也可能会过滤掉非内联的样式定义，导致类样式无法生效。

可行解决方案 #

• 最可靠方案：改用内联样式
  直接将样式写在对应元素的style属性中，替换类选择器的方式，这是所有邮件客户端都能兼容的写法：

  <h1 style="color: red;">Your verification code</h1>
  <h3>Enter your verification code in the Admin UI</h3>
  <h3 style="font-weight: 700; color: #305cf3">${code}</h3>
  <span>You can also verify your account by clicking
  <a style="text-decoration: none"
     href="http://localhost:5173/register/confirm?user=${event.request.userAttributes.email}&code=${code}">here
  </a>
  </span>
  

  注：顺便修正了原链接的参数错误——链接中第二个参数应该用&而非?连接，否则参数无法被正确解析。

• 备选尝试：完整HTML结构包裹
  若坚持使用<style>标签，可尝试用完整的html/head/body结构包裹内容，但这种方式仅在部分邮件客户端生效，兼容性无法保证：

  <html>
    <head>
      <style>
        .title {
          color: red;
        }
      </style>
    </head>
    <body>
      <h1 class="title">Your verification code</h1>
      <!-- 其余内容保持不变 -->
    </body>
  </html>
  

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