Html 在条带元素上使用CSS变量

我正在使用

条带元素

进行信用卡结账。问题是，我不能（或者我根本不知道如何）在这个

条带元素上使用我自己的
CSS变量
。
我需要使用
CSS变量
，以便在用户更改主题时更改颜色。以下是我当前的实现：

变量定义（我正在使用SASS）

CSS变量
是在类的作用域下定义的，该类根据当前选择的主题放在
主体
中

HTML（我使用的是Angular 6）

样式（我正在使用SASS）

附言：对我来说，变量在运行时会发生变化是很重要的（这就是我使用CSS变量的原因。
条带文档说

元素为您创建以条带为主体的UI组件

i、 它们的输入字段位于不同的文档中，因此无法访问自定义CSS变量

“足够好”的解决方案可能是读取setupStripe方法中的CSS自定义属性值，并将这些值作为普通字符串传递：

// Note: document.body is just an example:
const styles = getComputedStyle(document.body);
this.card = stripeElements.create("card", {
  iconStyle: "solid",
  style: {
    base: {
      iconColor: styles.getPropertyValue("--some-var")
      // ...etc
    }
  }
});

这非常适合只使用一次变量！不幸的是，更改主体样式后，样式将不会重新计算。是否可以在创建
后更改
卡
样式？条带文档说明“可以使用update（）动态更改元素的样式”。此方法可用于模拟CSS媒体查询，当在不同设备上查看时，这些查询会自动调整元素的大小。“.谢谢，我不知道这一点！我会尝试一下，如果成功，您会得到一个绿色箭头：）
<div #stripe></div>

    @ViewChild('stripe') el: ElementRef;
    card: any;
    cardHandler = this.onChange.bind(this);
    async onSubmit() { /* ... */ }

    setupStripe(): void {
        this.card = stripeElements.create('card', {
            iconStyle: 'solid',
            style: {
                base: {
                    iconColor: 'var(--some-var)',
                    // using css variables here does not work
                    // ...
                },
            }
        });
        this.card.mount(this.el.nativeElement);
        this.card.addEventListener('change', this.cardHandler);
    }
    destroyStripe(): void {
        this.card.removeEventListener('change', this.cardHandler);
        this.card.destroy();
    }

    ngAfterViewInit() {
        this.setupStripe();
    }

    ngOnDestroy() {
        this.destroyStripe();
    }

    onChange({ error }) { /* ... */ }

.StripeElement
    background-color: var(--dy-bg-1)
    // I don't have access to font colors etc here
    color: var(--dy-txt-1) !important
    // !important also does not work

// Note: document.body is just an example:
const styles = getComputedStyle(document.body);
this.card = stripeElements.create("card", {
  iconStyle: "solid",
  style: {
    base: {
      iconColor: styles.getPropertyValue("--some-var")
      // ...etc
    }
  }
});