作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 Stripe 表单如下,加载得很好
render() {
const createOptions = (fontSize: string) => {
return {
style: {
base: {
fontSize,
color: '#424770',
letterSpacing: '0.025em',
fontFamily: 'Source Code Pro, monospace',
'::placeholder': {
color: '#aab7c4',
},
},
invalid: {
color: '#9e2146',
},
},
};
};
return (
<div className={styles.cardsection}>
<form onSubmit={this.handleSubmit}>
<label>
Card Details
<CardElement {...createOptions(this.props.fontSize)} />
</label>
<button>
{this.state.paid === 'waiting' ? 'Please wait...' : 'Confirm order'}
</button>
</form>
</div>
);
}
}
export default injectStripe(CheckoutForm);
我有我的 styles.less 文件:
.cardsection {
width: 60%;
margin: auto;
margin-top: 30px;
background-color: #f6f9fc;
padding: 20px;
label {
color: #6b7c93;
font-weight: 300;
letter-spacing: 0.025em;
.StripeElement {
display: block;
margin: 10px 0 20px 0;
max-width: 500px;
padding: 10px 14px;
box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
border-radius: 4px;
background: white;
}
.StripeElement--focus {
box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
}
}
}
button {
white-space: nowrap;
border: 0;
outline: 0;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
color: #fff;
border-radius: 4px;
font-size: 15px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.025em;
background-color: #6772e5;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
margin-top: 10px;
}
button:hover {
color: #fff;
cursor: pointer;
background-color: #7795f8;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
}
出于某种原因,我无法设置 StripeElements 的样式。我的所有其他样式都工作得很好,但 Stripe 元素却不行。我已经检查了加载的 HTML,标签内是我的名为 StripeElement 的 div
我正在使用 React-Stripe-Element 库,并使用 Next.js 在 SSR 应用程序上实现它
编辑:我发现了问题,但我不知道如何克服它。当我的应用程序构建时,我的类会在 css 和 html 中分配一个随机变量。
例如,cardsection 变为cardsection__Xy12xg2。问题是在我的 HTML 中,StripeElement 仍为 StripeElement,但我的 CSS 变为 StripeElement__28vnshY
有什么办法可以克服这个问题吗?
最佳答案
解决方案是将 StripeElement 类作为属性直接传递到 Stripe 组件中:
<CardElement {...createOptions(this.props.fontSize)} className={styles.StripeElement} />
关于reactjs - StripeElements 不会设置样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49801635/
我的 Stripe 表单如下,加载得很好 render() { const createOptions = (fontSize: string) => { return {
我是一名优秀的程序员,十分优秀!