如何在Gomail库中为邮件应用CSS样式？

我已成功使用Gomail库向用户发送邮件，为邮件内容单独制作了HTML模板，并通过html2text库将HTML代码转换为文本，但目前仅能显示文本内容，CSS样式并未生效。请问如何在发送邮件时同时应用CSS样式？

相关代码 #

main.go #

func Verify(toEmail, accountName string) {
    mail := gomail.NewMessage()
    myEmail := middleware.LoadEnvVariable("APP_EMAIL")
    myPassword := middleware.LoadEnvVariable("APP_PASSWORD")
    body := new(bytes.Buffer)
    t, err := template.ParseFiles("cmd/template.html")
    if err != nil {
        log.Fatal(err)
    }
    getAccountInfo := AccountInfo{
        GetAccountName: accountName,
    }

    if err := t.Execute(body, getAccountInfo); err != nil {
        log.Fatal("Could not execute the template", err)
    }
    mail.SetHeader("From", myEmail)
    mail.SetHeader("To", toEmail)
    mail.SetHeader("Reply-To", myEmail)
    mail.SetHeader("Subject", "Confirm your email address")
    mail.SetBody("text/html", html2text.HTML2Text(body.String()))
    a := gomail.NewDialer("smtp.gmail.com", 587, myEmail, myPassword)
    if err := a.DialAndSend(mail); err != nil {
        log.Fatal(err)
    }
}

template.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .button-style{
            background-color:#008CBA; 
            border-color:#008CBA; 
            border-radius: 4px; 
            color:white; 
            height: 50px; 
            width: 300px;
        }
    </style>
</head>
<body>
    <center><h1>We're glad you're here, {{.GetAccountName}}</h1></center>
    <center>We just want to confirm it's you.<br><br></center>
    <center>
        <button class="button-style">
            Click to confirm your email address
        </button>
    <center>
    <center><br>If you didn't create a proctl account, just delete this email.</center>
</body>
</html>

解决方案 #

1. 修复核心错误：别把HTML转成纯文本发送 #

你现在的代码犯了个关键错误：用html2text.HTML2Text()把渲染好的HTML转换成了纯文本，再把这个纯文本设置为text/html类型的邮件体——这相当于把所有HTML标签和样式都剥离了，自然看不到CSS效果。

正确的做法是同时提供纯文本版本（给不支持HTML的客户端）和HTML版本（带样式）：
修改main.go中的邮件体设置部分：

// 先拿到完整的渲染后HTML内容
htmlBody := body.String()
// 设置纯文本版本（给不支持HTML的客户端）
mail.SetBody("text/plain", html2text.HTML2Text(htmlBody))
// 添加HTML版本（保留所有样式）
mail.AddAlternative("text/html", htmlBody)

2. 优化邮件CSS兼容性 #

邮件客户端对CSS的支持很有限，内部<style>标签的类选择器可能被Outlook等客户端忽略，建议改用内联样式：
修改template.html中的按钮代码：

<button style="background-color:#008CBA; border-color:#008CBA; border-radius:4px; color:white; height:50px; width:300px;">
    Click to confirm your email address
</button>

3. 额外注意事项 #

• 部分邮件客户端默认屏蔽HTML内容，需要用户手动开启显示
• 避免使用浮动、定位等复杂CSS属性，仅用字体、颜色、背景、边框这类基础属性

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