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 中，并且样式不会从父窗口级联到 iframes 。

当您将一个类添加到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选项添加的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