CSS中的条纹元素样式设置

Question

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

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 注入到 iframe 中 - 这就是它们按您期望的方式工作的原因。

TLDR;

如果您想将样式应用于 iframe 内的 input，请使用 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