Question

我正在尝试在React Modal内使用React Elements构建一个Stripe表单，其布局由React Grid管理

<StripeProvider apiKey="stripeApiKey">
    <Grid
        container
        direction="column"
        alignItems="center"
        justify="center"
        style={{ minWidth: '30rem', maxWidth: '100rem' }}
    >
        <Grid item>
            <Grid
                container
                direction="column"
                justify="center"
                style={{
                    backgroundColor: theme.palette.primary.dark,
                    padding: '73px',
                    width: '100%'
                }}
            >
                <Elements>
                    <CardElement />
                </Elements>
            </Grid>
        </Grid>
    </Grid>
</StripeProvider>

以上显示了CardElement，但是将其设置为1px宽度。如果我手动将IFrame的width属性设置为auto，则可以完全解决我的问题。如何为Stripe设置IFrame的width属性？（或者使用跨域IFrame甚至有可能）

或者，否则，如何解决此问题以显示字段？

Answer 1

React-Stripe的各个元素的样式必须作为道具手动传递。以下是他们的官方react-stripe-elements示例的示例：

元素

<CardNumberElement
                        onBlur={handleBlur}
                        onChange={this.handleChange}
                        onFocus={handleFocus}
                        onReady={handleReady}
                        {...createOptions(this.props.fontSize)}
                    />

函数createOptions

const createOptions = (fontSize, padding) => {
    return {
        style: {
            base: {
                fontSize,
                color: '#424770',
                letterSpacing: '0.025em',
                fontFamily: 'Source Code Pro, monospace',
                '::placeholder': {
                    color: '#aab7c4',
                },
                ...(padding ? { padding } : {}),
            },
            invalid: {
                color: '#9e2146',
            },
        },
    };
};

css

    input,
    .StripeElement {
      display: block;
      margin: 10px 0 20px 0;
      max-width: 500px;
      padding: 10px 14px;
      font-size: 1em;
      font-family: 'Source Code Pro', monospace;
      box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
      border: 0;
      outline: 0;
      border-radius: 4px;
      background: white;
    }

React Stripe Elements-将iFrame的宽度设置为auto？内部元素在网格和模态中不可见

1 个答案: