CSS中的条纹元素样式设置

debugcn 发表于 Dev

奥列克桑德尔

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

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？

特马雷克

这是个好问题。不幸的是，不可能按照您的想法将这些样式应用于card元素。原因是卡输入嵌入在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时，安装卡后会自动将样式添加到类中。在某种程度上，styleStripe.js将通过选项添加的样式注入到iframe中，这就是它们按您期望的方式工作的原因。

TLDR；

如果要将样式应用于inputiframe的内部，请使用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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-2

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章