javascript - CSS中的 Stripe 元素样式设置

Question

我可以在样式选项对象中为 Stripe 设置样式

var elementStyles = {
    base: {
        textAlign: 'center',
        fontWeight: 400,
        fontSize: '12px',
        color: '#333'
    }
};
          
var stripe = stripeElements.elements();

cardNumberStripeElement = stripe.create('cardNumber', {
    styles: elementStyles
});

但我想将样式转移到 css。
此示例不适用于我的样式，仅适用于容器的样式

var elementClasses = {
    base: 'card-info-base'
};
var stripe = stripeElements.elements();

cardNumberStripeElement = stripe.create('cardNumber', {
    classes: elementClasses
});

在 CSS 中

.card-info-base {
    text-align: center "does not work";
    font-weight: 400 "does not work";
    font-size: 12px "does not work";
    height: 100px "works"
}

如何将样式转移到css？

Answer 1

这是个好问题。不幸的是，不可能按照您的想法将这些样式应用于卡片元素。原因是卡片输入嵌入在 iframe 中，并且样式不会从父窗口向下级联到 iframe。

当你添加一个类到 classes选项，该类将添加到您安装卡的元素中。例如，这大致是在您的情况下安装元素后 DOM 的样子:

<div id="card-element" class="card-info-input StripeElement--empty">
  <div class="__PrivateStripeElement">
   <iframe src="https://js.stripe.com/v3/">
      #document
      <input class="InputElement">
   </iframe>
  </div>
</div>

如您所见，card-info-input 应用的任何样式不会进入实际输入，因为它在 iframe 中。

当您使用 style 时，情况有所不同。选项 [0]。当您使用 style 添加自定义样式时样式自动添加到 InputElement 的选项卡挂载时的类。在某种程度上，通过 style 添加的样式选项由 Stripe.js 注入(inject)到 iframe 中——这就是它们按您期望的方式工作的原因。

TLDR；

如果您想将样式应用于 input在 iframe 中使用 style选项 [0]。如果你想对卡片的父元素应用样式，你可以使用 classes选项 [1] - 如果您想根据输入的状态(聚焦、无效等)应用不同的样式，这将特别有用

[0] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-style

[1] https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-classes