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

Posted

技术标签:

【中文标题】React-Stripe-Elements 元素未按预期呈现样式【英文标题】:React-Stripe-Elements element not rendering style as expected 【发布时间】: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;

【问题讨论】:

【参考方案1】:

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

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

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

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

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

【讨论】:

以上是关于React-Stripe-Elements 元素未按预期呈现样式的主要内容,如果未能解决你的问题,请参考以下文章

Next.js:文档未定义

条纹支付:来源与令牌/卡?

如何在 React 测试中加载 Stripe?

即使将元素推入其中,数组元素也未定义[重复]

为啥即使元素存在,硒也会抛出未找到元素的错误? [复制]

更改未点击元素的不透明度