Настройка стиля элементов полосы в 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, вставляются в iframe с помощью Stripe. js - поэтому они работают так, как вы ожидаете.

TLDR;

Если вы Чтобы применить стили к input внутри iframe, используйте параметр style [0]. Если вы хотите применить стили к родительскому элементу карты, вы можете использовать опцию classes [1] - это особенно полезно, если вы хотите применять разные стили в зависимости от состояния ввода (сосредоточенный, недействительный и т. Д. c). )

[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