web-dev-qa-db-ja.com

どのようにして、react-stripe-elements入力コンポーネントで境界線スタイルを設定できますか？

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

入力コンポーネントに境界線のスタイルを設定するにはどうすればよいですか？

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

ただし、カスタムスタイルのインターフェースは提供していなかったようです。

誰か知ってる？

更新：

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

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

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

すばらしい質問です。ここで説明したように、ストライプ要素にパディングまたはボーダーを適用するには、要素自体ではなく、要素を含む親DOMノードのスタイルを設定します。

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

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

8
hpar

最も簡単な解決策は次のとおりです。

<div
  style={
    {
     border: '2px solid red'
    }
  }
>
</div>
2
Jackkobec

パディングを追加しようとしましたが、ラッパーdivが機能しませんでした。ただし、カード要素でclassNameを許可するために、reacts-stripe-elementsに 変更を追加 しました。それは私のために働きました：

私のCSSでは：

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

私のCardElementの場合：

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

要素のオプションスタイルにある属性には、インラインスタイルを使用する必要があります。 https://stripe.com/docs/stripe-js/reference#element-options

0
Sia