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

【问题标题】：React-Stripe-Elements element not rendering style as expectedReact-Stripe-Elements 元素未按预期呈现样式
【发布时间】：2018-06-26 23:46:51
【问题描述】：

我正在尝试设置 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;

【问题讨论】：

标签： javascript css reactjs stripe-payments

【解决方案1】：

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

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

100% 宽度 - 我认为该软件包假定您需要 100% 宽度输入。例如，我的所有输入都是 100%，但它们位于我想要在屏幕上显示的较小宽度的容器中。
无边框 - 您可以根据需要添加边框。当页面的背景颜色不是白色时，输入通常更明显。
高度或内边距 - 这可能是因为看不到真正的边界。

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

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

【讨论】：