使用 Stripe Elements 中现有的 CSS 类进行 React答案

【问题标题】：Using existing css class in Stripe Elements for React使用 Stripe Elements 中现有的 CSS 类进行 React
【发布时间】：2018-09-24 22:47:07
【问题描述】：

我正在尝试在 Stripe Elements 表单中使用我们现有的 CSS 类。根据元素选项部分下的文档https://stripe.com/docs/stripe-js/reference，我可以传递我现有的CSS 类，但下面的代码不起作用。

const customStripeClasses = {
   base: 'app-form-default input',
};

class MyPaymentForm extends Component {

   render() {

      return(
         <div>
             <CardElement classes={customStripeClasses} />
         </div>
      );
   }
}

基本上，我试图让 Stripe Elements 表单组件使用我们为常规 HTML 元素创建的 CSS 类，例如输入、文本区域等。

知道如何让它工作吗？

【问题讨论】：

您是否尝试过将您的 css 类添加到 empty 的 customStripeClasses 属性？
我刚试过，但没用。
我复制了您的代码，它对我有用，请记住您的 css 适用于 Stripe 输入的容器，您可以在 css 中添加附加选择器以正确应用您的样式。您可以在班级中添加box-shadow 以查看它是否有效。
是的，它正在工作，但由于某种原因，如果我输入两个类名，如app-form-default input，它就不起作用。但是当我将这两者合并为my-pretty-class 并放入empty 时，它起作用了。
@Dyo 谢谢你的帮助。您的建议是正确的解决方案。如果您将您的回复作为答案发布，我可以接受它，以便您获得信用。再次感谢。

标签： css reactjs stripe-payments

【解决方案1】：

据我从文档中可以看出，您需要使用 react-stripe-elements 来使用带反应的条纹。而CardElement 没有道具classes。您可以使用 className 将 css 类传递给它：

import React from 'react';
import {CardElement} from 'react-stripe-elements';

class CardSection extends React.Component {
  render() {
    return (
      <div>
        <CardElement className="app-form-default input" />
      </div>
    );
  }
};

【讨论】：

@Sam 这当然只是一个 sn-p。要使其工作，您必须按照Getting Started 上的说明进行操作。您将需要一个StripeProvider 。能不能说的准确一点。什么不适合你？所以我可以改进我的答案。
我已按照入门说明进行操作，并且能够渲染 CardElement。我的意思是className="app-form-default input" 不起作用。如果我像在常规 React 组件中那样使用 className 传递 CardElement，则不会使用我的 css 类。
这很有趣。刚刚与 webchat.freenode.net 的 Stripe 支持人员聊天，他建议正确的方法就是您所建议的。让我再试一次。也许我在某个地方犯了一个错误。