Strapi V4 电子邮件模板和 css 样式在发送邮件和接收邮件后未考虑

问：

我正在尝试从我创建的电子邮件模板 Strapi V4 发送电子邮件。

邮件发送得很好，我收到也很好，但是尽管我的 html 文件中有内联 css 样式，但在发送邮件时似乎没有考虑到它，因为当我收到它时，与我的 html 电子邮件模板相比，结果并不好......

我尝试内联使用css：它不起作用。我尝试在同一个 html 文件中使用类和标签的 css，但它也不起作用...... 有没有解决方案可以考虑我对此电子邮件模板的 css 样式？

如果我从计算机上的 localhost 检查我的 html 文件，它可以工作，但在发送电子邮件后收到它时就不能了。

只需低沉我的代码（我故意将 html 文件中的一些个人信息替换为“已删除”......

<div style="max-width: 800px; display: flex; flex-direction: column; justify-content: center; text-align: center; align-content: center;">
<img style="width: 100%;" src="deleted">
<p style="text-align: left; color: hsl(0, 0%, 60%)">
    COMMANDE #&lt;%= deleted.deleted.ref %&gt;
</p>
<h2>Merciiiii et bienvenue dans la team deleted!</h2>
<br>
<p>
    Hey &lt;%= deleted.deleted.firstname %&gt;, nous avons bien reçu votre commande et nous vous en remercions vivement ! Elle est actuellement en cours de préparation par la team logistique !
</p>
<p>
    On vous tient au courant dès qu'elle est en route !
</p>
<p>
    Pour rappel, voici les prochaines étapes pour accéder à deleted:
</p>
<br>
<img style="width: 80%; margin-left: 50px" src="https://deleted.fr/">
<table style="table-layout: fixed; width: 100%;">
    <tbody>
        <tr style="display: flex; flex-direction: row;">
            <td style="flex: 1 1 auto; display:flex; flex-direction: column; justify-content: center;">
                <span style="text-align: center; max-width: 200px;">Votre commande a été prise en compte et sera bientôt expédiée par notre équipe !</span>
            </td>
            <td style="flex: 1 1 auto; display:flex; flex-direction: column; justify-content: center;">
                <span style="text-align: center; max-width: 200px;">Votre commande est en livraison. Elle sera prochainement entre vos mains</span>
            </td>
            <td style="flex: 1 1 auto; display:flex; flex-direction: column; justify-content: center;">
                <span style="text-align: center; max-width: 200px;">C'est arrivé ! Vous pouvez maintenant en profiter en vous connectant sur le site grâce au code d'identification à l'intérieur</span>
            </td>
        </tr>
    </tbody>
</table>
<table style="table-layout: fixed; width: 100%;">
    <tbody>
        <tr style="display: flex; flex-direction: row; justify-content: center;">
            <td style="justify-content: center; text-align: center; align-items: center;">
                <a style="text-decoration: none;" href="<%= deleted.deleted.invoice %>"><img src="https://deleted.fr/deleted-" alt="Checkez votre commande"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>
    Résumé de votre commande : 
</p>
<table style="table-layout: fixed; width: 100%;">
    <tbody>
        <tr style="display: flex;">
            <td>
                <img style="max-width: 100px; max-height: 100px; margin-left: 15px; margin-right: 15px;" src="https://deleted.fr/deleted">
            </td>
            <td style="flex: 1 1 auto;">
                <span>deleted, votre guide et accompagnement grossesse</span>
                <br>
                <span>X&lt;%= deleted.deleted.quantity %&gt;</span>
            </td>
        </tr>
        <tr style="display: flex;">
            <td style="flex: 1 1 auto;">
            </td>
            <td>
                &lt;%= deleted.deleted.amount %&gt;€
            </td>
        </tr>
    </tbody>
</table>
<hr>
<table style="table-layout: fixed; width: 100%;">
    <tbody>
        <tr style="display: flex;">
            <td style="flex: 1 1 auto;">
                <span>Sous-total</span>
            </td>
            <td>
                &lt;%= deleted.deleted.amount %&gt;€
            </td>
        </tr>
        <tr style="display: flex; margin: 30px 0px 10px 0px;">
            <td style="flex: 1 1 auto;">
                <span>Expédition</span>
            </td>
            <td style="flex: 1 1 auto;">
                <span></span>
            </td>
            <td>
                0,00€
            </td>
        </tr>
        <tr style="display: flex;">
            <td>
                <span>Total</span>
            </td>
            <td style="flex: 1 1 auto;">
                <span></span>
            </td>
            <td>
                &lt;%= deleted.deleted.amount %&gt;€
            </td>
        </tr>
    </tbody>
</table>
<p style="text-align: left">
<br>
Cordialement,
<br>
<span style="color: #e7a6ca">
    <strong>L'équipe deleted</strong>
</span>
</p>
<p style="text-align: center">
<br><span style="color: hsl(0, 0%, 60%)">------ NE PAS REPONDRE A CE MAIL ------</span><br><span style="color: hsl(0, 0%, 60%)">Cet email a été envoyé depuis le site&nbsp;</span><a href="https://www.deleted.fr"><span style="color: hsl(0, 0%, 60%)">https://www.deleted.fr</span></a><br>&nbsp;
</p>