Использование существующего класса CSS в Stripe Elements for React

Question

Я пытаюсь использовать наши существующие классы CSS в моем Stripe Elements форма. Согласно этому документу https://stripe.com/docs/stripe-js/reference в разделе Параметры элементов, я могу передать свой существующий CSS классы, но мой код ниже не работает.

const customStripeClasses = {
   base: 'app-form-default input',
};

class MyPaymentForm extends Component {

   render() {

      return(
         <div>
             <CardElement classes={customStripeClasses} />
         </div>
      );
   }
}

По сути, я пытаюсь заставить компоненты формы Stripe Elements использовать CSS классы, которые мы создали для обычных элементов HTML, например input, textarea и т. д.

Любая идея, как я могу заставить это работать?

Answer 1

Насколько я вижу из документов, которые вы должны использовать react-stripe-elements использовать полосу с реагировать. А также CardElement не имеет опоры classes, Вы можете передать классы CSS к нему с className:

import React from 'react';
import {CardElement} from 'react-stripe-elements';

class CardSection extends React.Component {
  render() {
    return (
      <div>
        <CardElement className="app-form-default input" />
      </div>
    );
  }
};