反応ストライプ要素の入力コンポーネントを使用して境界線のスタイルを設定するにはどうすればよいですか？

Question

このReactコンポーネントライブラリについて

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

はどのようにして入力コンポーネントでボーダースタイリングを置くことができますか？

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

でも、カスタムスタイルのインターフェイスを提供していないようです。誰もが知っている

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

？

アップデート：以下

はStripeElementクラスを使用すると、カスタムスタイルを適用することをサンプルコードです。

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

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

Answer 1

あなたが要素ではなく、要素自体を含む親DOMノードのスタイルを設定したいストライプ要素にパディングやボーダーを適用するには、ここに述べたように：

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

私はdivの中であなたのCardElementをラップしたいですそれにスタイリングを適用します。上記のように、Elementsは、完全な/空/フォーカス/無効の状態と同様に、親要素に自動的にStripeElementクラスを適用します。