javascript - Stripe elements stilinställning i css

Jag kan ställa in stilar i stilalternativobjektet för Stripe

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

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

Men jag vill överföra stilar till css. Det här exemplet tillämpar inte mina stilar, bara de som gäller för behållaren

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

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

i 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"
}

Hur överför jag stilar till CSS?

Svar #1

Det är en bra fråga. Tyvärr är det inte möjligt att applicera de stilarna på kortelementet på det sätt du tänker. Anledningen är att kortinmatningen är inbäddad inom en iframe och stilar överförs inte från ett föräldrafönster ner till iframes.

När du lägger till en klass till classes-alternativet, läggs klassen till elementet som du monterar kortet i. Till exempel, detta är ungefär hur DOM skulle se ut när elementet har monterats i ditt fall:

<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>

Som du kan se, skulle alla stilar som tillämpas av card-info-input inte nå själva inmatningen eftersom den ligger i en iframe.

Detta är annorlunda när du använder style-alternativet [0]. När du lägger till en anpassad stil med hjälp av style-alternativet läggs den stilen automatiskt till i InputElement-klassen när kortet monteras. På ett sätt injiceras stilar som lagts till via style-alternativet i iframe av Stripe.js - därför fungerar de som du förväntar dig.

Sammanfattning;

Om du vill tillämpa stilar på input inuti iframe, använd style-alternativet [0]. Om du vill tillämpa stilar på kortets föräldraelement kan du använda classes-alternativet [1] - detta är särskilt användbart om du vill tillämpa olika stilar beroende på inputens tillstånd (fokuserad, ogiltig, etc.)

[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