我最近开始使用以下工具构建一个简单的 Web 应用程序：
下一步是包括一个邮件列表。我想添加一个包含两个组件的简单表单：一个文本框和一个订阅按钮。
我与后端无关，并考虑使用 MailChimp 或 SendGrid。但是我遇到了以下问题。MailChimp 和 SendGrid 都允许用户生成可以复制到您的网页的 HTML 格式的自定义表单。问题是样式与碳设计系统不匹配。例如，我想使用官方组件cv-button而不是标准button。
我尝试了两种方法来解决这个问题。首先，我摆弄 css 样式。这不是要走的路，因为我的 Carbon 设计系统使用 scss 而不是 css，并且为这种形式设置自定义 css 将不可避免地导致未来的设计不一致。
其次，我尝试直接使用 MailChimp 和 SendGrid API。然而，这是一项乏味且耗时的工作。此外，它给项目带来了很多复杂性。
我的问题：将订阅按钮添加到与定制设计系统一致的节点 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&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-button 等官方 Carbon 组件的风格不同。