React-Stripe-JS：如何为表单添加边框样式？答案

【问题标题】：React-Stripe-JS: how to add border styling to a form?React-Stripe-JS：如何为表单添加边框样式？
【发布时间】：2021-02-28 03:34:58
【问题描述】：

我正在与react-stripe-js 合作，并且正在设计卡片元素的样式。我无法为我创建的样式添加边框样式。我的 CheckoutForm 中有以下代码，例如，我尝试添加彩色边框。我得到的不是任何边框，而是无边框输入。

CheckoutForm.js ...

const ELEMENT_OPTIONS = {
  iconStyle: "solid",
  hidePostalCode: true,
  style: {
    base: {
      border: '2px solid red',//TRIED THIS**************************
      iconColor: "rgb(240, 57, 122)",
      color: "rgb(240, 57, 122)",
      fontSize: "16px",
      fontFamily: '"Open Sans", sans-serif',
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "#CFD7DF"
      }
    },
    invalid: {
      color: "#e5424d",
      ":focus": {
        color: "#303238"
      }
    }
  }
};
...

<form onSubmit={this.SaveCard}>
          <div className="split-form">
            <label htmlFor="cardNumber">Card Number</label>
            <CardNumberElement
              id="cardNumber"
              options={ELEMENT_OPTIONS}
            />
            <label htmlFor="expiry">Card Expiration</label>
            <CardExpiryElement
              id="expiry"
              options={ELEMENT_OPTIONS}
            />
          </div>
          <div className="split-form">
            <label htmlFor="cvc">CVC</label>
            <CardCvcElement
              id="cvc"
              options={ELEMENT_OPTIONS}
            />
          </div>
          <button type="submit" disabled={!stripe}>
            Save Card
          </button>
        </form>

【问题讨论】：

no sirve para nada el ejemlo

标签： javascript css reactjs stripe-payments

【解决方案1】：

我通过 div 包围每个 CardElement 并将我的样式添加到父 div 来做到这一点：

<div style={{ margin: '10px 0 10px', border: 'solid' }}>
    <CardNumberElement
      options={options}
      onReady={() => {
        console.log("CardNumberElement [ready]");
      }}
      onChange={event => {
        // console.log("CardNumberElement [change]", event);
      }}
      onBlur={() => {
        console.log("CardNumberElement [blur]");
      }}
      onFocus={() => {
        console.log("CardNumberElement [focus]");
      }}
    />
</div>

【讨论】：

【解决方案2】：

与其将其添加为（内部）元素样式的一部分，不如直接设置 <Card*Element>s 的样式，就像对任何其他元素一样。

【讨论】：