How to add custom CSS to paypal smart buttons

What I am trying to achieve is not actually get the payment button background to be black but rather be a custom color, so for instance lets say I want it pink with white letters (just as example), How can I achieve this?

<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?client-id=#################&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>
<script>
    paypal.Buttons({
        style: {
            shape: 'pill',
            color: 'black',
            layout: 'vertical',
            label: 'subscribe',
            size: 'responsive',
        },
        createSubscription: function(data, actions) {
            return actions.subscription.create({
                'plan_id': 'P-##########'
            });
        },
        onApprove: function(data, actions) {
            alert(data.subscriptionID);
        }
    }).render('#paypal-button-container');
</script>

I have already tried the following (offcourse it didn't work):

<style>
.paypal-button.paypal-button-shape-pill {
  background: pink!important;
  color: white!important;
}
</style>

and because it is generated inside an iframe I also tried the following:

<script>
window.onload = function() {
   let myiFrame = document.getElementById("someId");
   let doc = myiFrame.contentDocument;
   doc.body.innerHTML = doc.body.innerHTML + '<style>.paypal-button.paypal-button-shape-pill{background: pink!important;color: white!important;}</style>';
}
</script>

Sadly, It still is not achieved yet. Can someone help me out with this problem?

Edit: Just want to mention I cannot just change the style color in the script of paypal.buttons because than the buttons don't show up anymore.