Vue.js 如何使用自定义设计系统向Node JS应用程序添加电子邮件订阅表单

我最近开始使用以下工具构建一个简单的web应用程序：

下一步是包含邮件列表。我想添加一个包含两个组件的简单表单：一个文本框和一个订阅按钮

我是后端不可知论者，并考虑使用MailChimp或SendGrid。然而，我遇到了以下问题。MailChimp和SendGrid都允许用户生成HTML格式的自定义表单，这些表单可以复制到您的网页中。问题是这种风格与碳纤维设计体系不匹配。例如，我想使用官方组件

cv按钮

，而不是标准的

按钮

我尝试了两种方法来解决这个问题。首先，我摆弄css样式。这不是我的碳设计系统使用的方式，因为我的碳设计系统使用的是scs而不是css，为这个表单设置自定义css将不可避免地导致将来的设计不一致

其次，我尝试直接使用MailChimp和SendGrid API。然而，这是一项乏味而耗时的工作。此外，这给项目带来了很多复杂性

我的问题：如果要将订阅按钮添加到与定制设计系统一致的node js（vue.js）应用程序和第三方电子邮件营销解决方案（mailchimp/sendgrid），最佳做法是什么

这是我当前的mailchimp代码：

<template>
  <div>
    <!-- Begin Mailchimp Signup Form -->
    <link
      href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
      rel="stylesheet"
      type="text/css"
    />

    <div id="mc_embed_signup">
      <form
        action="https://pm.us1.list-manage.com/subscribe/post?u=5119408c70596654ef4da6c1a&amp;id=987baf3d10"
        method="post"
        id="mc-embedded-subscribe-form"
        name="mc-embedded-subscribe-form"
        class="validate"
        target="_blank"
        novalidate
      >
        <div id="mc_embed_signup_scroll">
          <label for="mce-EMAIL">Join Waiting List</label>
          <input
            type="email"
            value=""
            name="EMAIL"
            class="email"
            id="mce-EMAIL"
            placeholder="email address"
            required
          />
          <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
          <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input
              type="text"
              name="b_5119408c70596654ef4da6c1a_987baf3d10"
              tabindex="-1"
              value=""
            />
          </div>
          <div class="clear">
            <input
              type="submit"
              value="Subscribe"
              name="subscribe"
              id="mc-embedded-subscribe"
              class="button"
            />
          </div>
        </div>
      </form>
    </div>

    <!--End mc_embed_signup-->
  </div>
</template>

<script>
export default {
  name: "SignupForm",
  components: {}
};
</script>

加入轮候名单
导出默认值{
名称：“注册表格”，
组件：{}
};

其表现为：

与cv按钮等官方碳组件的样式不同。

移除

<link
  href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css"
  rel="stylesheet"
  type="text/css"
/>

应该解决这个问题