web-dev-qa-db-fra.com

Comment puis-je mettre un style de bordure avec le composant d'entrée reagens-stripe-elements?

À propos de cette bibliothèque de composants React.

Comment puis-je mettre un style de bordure avec composant d'entrée?

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

mais, semble-t-il, ils n'ont pas fourni d'interface de style personnalisé, cependant.

Quelqu'un sait?

Mettre à jour:

voici un exemple de code utilisant la classe StripeElement pour appliquer un style personnalisé.

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

.StripeElement--invalid {
  border: 1px solid red;
}
reactjsstripe-payments
9
mitsuruog

Bonne question! Comme indiqué ici, pour appliquer un remplissage ou une bordure à un élément Stripe, vous souhaitez attribuer un style au nœud DOM parent contenant l'élément, et non à l'élément lui-même:

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

Je vais emballer votre CardElement dans une div et ensuite appliquer un style à cela. Comme indiqué ci-dessus, Elements applique automatiquement la classe StripeElement à l'élément parent, ainsi que les états complet/vide/focus/invalide.

4
hpar

J'essayais d'ajouter du rembourrage et la division wrapper ne fonctionnait pas pour moi. Cependant, ils ont ajouté une modification à réagir-stripe-elements afin de permettre une valeur className sur l'élément de la carte. Cela a fonctionné pour moi:

Dans mon css:

.card-element {
  padding: 11.4px 12px;
}

Pour mon CardElement:

<CardElement style={style} className="card-element" />

Vous devez toujours utiliser le style en ligne pour les attributs qui se trouvent dans les styles d'options d'élément: https://stripe.com/docs/stripe-js/reference#element-options

0
Sia