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

Question

我正在尝试设置 React-Stripe-Elements，虽然我能够获得要渲染的基本形式，但它以一种非常时髦的方式实现。我什至尝试从网上找到的表单添加 CSS，但它无法在 CardElement 中正确呈现。如何让 React-Stripe-Elements 使用正确的 UI 或与文档上的 UI 远程相似的 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

我不确定您对“时髦”的定义是什么 - 最好添加指向特定元素的链接并说明与您期望的不同之处。

如果让我猜测，我会说有些事情可能并不如您所愿:

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

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

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