更改 react-stripe-elements 的字体系列答案

【问题标题】：Changing font-family of react-stripe-elements更改 react-stripe-elements 的字体系列
【发布时间】：2020-02-01 19:06:36
【问题描述】：

所以我正在将 Stripe 元素集成到我的 React 应用程序中，并且我正在尝试更改元素的字体。我尝试使用 style const 传递样式，但这并没有改变任何东西

const style = {
  base: {
    fontFamily: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
  }
}

<CardNumberElement style={style} className="form-control" id="cardNumber" placeholder="XXXX XXXX XXXX XXXX" type="text" />

我已尝试使用此 GitHub 问题中的代码：https://github.com/stripe/react-stripe-elements/issues/179

我试过这个：https://wordpress.org/support/topic/change-css-for-checkout-form/

我试过只使用简单的内联样式。请那些不得不处理这个问题的人帮助我

【问题讨论】：

标签： css reactjs stripe-payments

【解决方案1】：

Stripe 提供了一个 <Elements> 组件，您需要使用它来包装所有条带元素，并将以下字体对象作为道具提供给 Elements：

<Elements
  options={{
    fonts: [
      {
        cssSrc:
          'https://fonts.googleapis.com/css2?family=Archivo&display=swap'
      }
    ]
  }}
>
  <MyComponent />
</Elements>

【讨论】：