React-Stripe-Elements元素未按预期呈现样式

Question

我试图设置React-Stripe-Elements，虽然我能够获得渲染的基本表单，但它却以一种非常时髦的方式进行渲染。我甚至尝试从我在网上找到的表单中添加CSS，但它不能正确地在CardElement中呈现。如何使用适当的UI或UI来渲染React-Stripe-Elements，甚至远远类似于文档上的UI？

CardElement当前呈现如下：

我的卡元素文件如下：

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

class CardSection extends React.Component {
  render() {
    return (
      <label>
        Card details
        <CardElement style= {{ base: { color: '#fff',
    fontWeight: 500,
    fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
    fontSize: '15px',
    fontSmoothing: 'antialiased' }}} />
        </label>
    );
  }
};

export default CardSection;

Answer 1

我不确定你对＆＃34; funky＆＃34;的定义是什么？是 - 可能最好添加一个特定元素的链接，并说明与预期不同的内容。

如果我猜，我会说一些事情可能不是你喜欢的那样：

• 100％宽度 - 我认为包装假设您需要100％宽度输入。例如，我的所有输入都是100％，但它们位于屏幕上我想要的宽度较小的容器中。
• 没有边框 - 如果您愿意，可以添加边框。当页面的背景颜色不是白色时，输入通常更明显。
• 高度或填充 - 这可能是看不到真实边界的功能。

您可以在此处查看他们在演示中使用的更多样式选项：https://github.com/stripe/react-stripe-elements/blob/master/demo/demo/index.js

这个答案可能也很有用https://stackoverflow.com/a/43986418/5049215