Wie kann ich Border Styling mit react-stripe-elements Input-Komponente setzen?

Question

Über diese React-Komponentenbibliothek.

• https://github.com/stripe/react-stripe-elements

Wie kann ich Grenze Styling mit Eingabekomponente?

<CardElement style={{ 
    base: { 
    fontSize: '18px', 
    border: '1px solid red' // it is not work. 
    } 
}} /> 

aber scheint, sie bieten keine benutzerdefinierte Stil-Schnittstelle, obwohl.

• https://stripe.com/docs/elements/reference#element-options \

Wer weiß?

Update:

folgenden sind Beispielcode, dass StripeElement Klasse mit benutzerdefinierten Styling anzuwenden.

.StripeElement { 
    border: 1px solid #eee; 
} 

.StripeElement--invalid { 
    border: 1px solid red; 
} 

Answer 1

Große Frage! Wie hier erwähnt, Polsterung oder eine Grenze zu einem Stripe Element anwenden möchten Sie den übergeordneten DOM-Knoten, um Stil, die das Element enthält, nicht das Element selbst:

https://stripe.com/docs/elements/reference#the-element-container

ich Ihre CardElement in einem div wickeln würde und dann Styling anwenden. Wie oben erwähnt, wendet Elements automatisch die StripeElement-Klasse auf das übergeordnete Element sowie die vollständigen/leeren/Fokus/ungültigen Status an.