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 元素未按预期呈现样式的主要内容,如果未能解决你的问题,请参考以下文章