如何將邊界樣式與react-stripe-elements輸入組件配合使用？

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

我包你的CardElement在一個div然後將樣式應用於此。如上所述，元素自動將StripeElement類應用於父元素，以及完成/空/焦點/無效狀態。