How to add an email subscription form to Node JS app using Custom Design System - vue.js

Question

I recently started building a simple web app using the following tools:
Vue.js
Carbon Design System
The next step is to include a mailing list. I would like to add a simple form with two components: a text box and a subscribe button.
I am backend agnostic and considered using MailChimp or SendGrid. However I run into the following issue. Both MailChimp and SendGrid allow the user to generate custom forms in HTML that can be copied to your webpage. The issue is that the style doesn't match the Carbon Design System. I would like to use the official components cv-button instead of the standard button for instance.
I tried two approaches to address the issue. First I fiddled with css styling. This is not the way to go as my Carbon Design System uses scss instead of css and setting a custom css for just this form will inevitably lead to an inconsistent design in the future.
Secondly I tried working with both MailChimp and SendGrid APIs directly. This however is a tedious and time consuming endeavour. Moreover it introduces a lot of complexity to the project.
My question: What is the best practice when it comes to including a subscription button to a node js (vue.js) app and third party email marketing solution (mailchimp / sendgrid) that is consistent with a custom design system.
This is my current mailchimp code:
<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>
That renders as:
which is different than the style of official Carbon components such as cv-button etc.

Answer 1

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