리액션 스트라이프 요소 입력 구성요소를 사용하여 어떻게 테두리 스타일링을 배치할 수 있는가?

리액션 스트라이프 요소 입력 구성요소를 사용하여 어떻게 테두리 스타일링을 배치할 수 있는가?

이 리액트 구성 요소 라이브러리 정보

• 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;
}

좋은 질문이야!여기서 설명한 대로 스트라이프 요소에 패딩 또는 테두리를 적용하려면 요소 자체가 아닌 요소를 포함하는 상위 DOM 노드를 스타일링하십시오.

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

나는 너의 CardElement를 div에 싸서 거기에 스타일링을 적용하겠다.위에서 언급한 바와 같이, 원소는 자동으로StripeElement상위 요소에 대한 클래스와 전체/일반/일반/일반 상태.

가장 간단한 해결책은 다음과 같다.

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

패딩을 추가하려고 했는데 포장지 칸이 안 맞았어.그러나, 그들은 a를 허용하기 위해 react-stripe-elements에 대한 변경을 추가했다.className카드 요소에그게 내게 효과가 있었어:

내 css:

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

내 CardElement의 경우:

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

요소 옵션 스타일에 있는 속성에 대해서는 여전히 인라인 스타일링을 사용해야 함: https://stripe.com/docs/stripe-js/reference#element-options

문서에 추가할 수 있는 소품 참조가 있다.CardElement구성 요소:

const cardElementOptions = {
  style: {
    base: {
      color: "#666",
      fontSize: "20px",
    }
    invalid: {
      color: "#fa755a",
      fontSize: "fa755a",
    }
  }
}

return (
  <form onSubmit={handleOnSubmit}>
    <CardElement options={cardElementOptions} />
    <button type="submit">Submit</button>
  </form>
)

참조URL: https://stackoverflow.com/questions/43974321/how-can-i-put-border-styling-with-react-stripe-elements-input-component