在条纹元素上使用 CSS 变量

Question

我正在使用Stripe Elements信用卡结帐。问题是，我不能（或者我根本不知道如何）CSS variables在这个Stripe Element. CSS variables当用户更改主题时，我需要使用以更改颜色。这是我目前的实现：

变量定义（我使用的是 SASS）

.theme1
    --color-1: red
    --color-2: pink
    // ...
.theme2
    --color-1: blue
    --color-2: lilec
    // ...
.theme3
    --color-1: orange
    --color-2: yellow
    // ...
// ...

的CSS variables是一类的范围内，即投入到在限定的body当前选择取决于哪个主题。

HTML（我使用的是 Angular 6）

<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 }) { /* ... */ }

样式（我正在使用 SASS）

.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

PS：对我来说很重要，变量会在运行时改变（这就是我使用 CSS 变量的原因。

Answer 1

条纹文档说

Elements 为您创建由 Stripe 托管的UI 组件

即它们的输入字段位于不同的文档中，因此无法访问您的自定义 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
    }
  }
});