Question

所以我正在将Stripe元素集成到我的React应用程序中，并且我有时间尝试更改元素的字体。我尝试使用样式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/

我尝试仅使用简单的内联样式。请任何需要处理的人帮助我

Answer 1

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

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

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

1 个答案: