条纹卡元素输入具有多步形式的黑色输入

Question

我正在制作一个多部分的表格，我正在使用条纹来收集卡片信息。但是，每当我从一个部分切换到另一个部分并切换回卡片元素条纹时，我的输入就会出现黑色背景。有人知道这个问题吗？

我尝试弄乱条带提供的卡片选项，并认为可能有一些样式条提供了用于空或无效卡片的样式，但这里似乎并非如此。

import classes from "./Form.module.css"
import Button from "../UI/Button"
import Heading1 from "../UI/Heading1"
import Input from "./Input"
import { Transition } from "react-transition-group"
import useInput from "../../hooks/useInput"
import validator from "validator"
import { useState, useEffect, useRef } from "react"
import ButtonDisabled from "../UI/ButtonDisabled"
import Select from "./Select"
import { CardElement } from "@stripe/react-stripe-js"


const CARD_OPTIONS = {
    iconStyle: "solid",
    hidePostalCode: true,
    classes: {
        focus: classes.cardContainerFocus,
    },
    style: {
        base: {
            iconColor: "#fe019a",
            color: "#f1a6d3",
            backgroundColor: 'transparent',
            fontWeight: 500,
            fontFamily: "Roboto, Open Sans, Segoe UI, sans-serif",
            fontSize: "16px",
        },
        invalid: {
            iconColor: "red",
            color: "red",
        },
    },
}

const FormPayment = (props) => {

    const [formIsValid, setFormIsValid] = useState(false)

    const currencyRef = useRef('')

    const {
        value: amountValue,
        error: amountError,
        errorMessage: amountErrorM,
        touched: amountTouched,
        onChangeHandler: amountOnChange,
        onBlurHandler: amountOnBlur,
    } = useInput('Enter A Valid Amount', (value) => validator.isNumeric(value.trim()))
    
    const {
        value: cardNameValue,
        error: cardNameError,
        errorMessage: cardNameErrorM,
        touched: cardNameTouched,
        onChangeHandler: cardNameOnChange,
        onBlurHandler: cardNameOnBlur,
    } = useInput("Empty Name", (value) => !validator.isEmpty(value.trim()))

    useEffect(() => {
        const formHasError = (
            amountError ||
            cardNameError
        )

        const formIsFilled =
            !!(amountValue &&
            cardNameValue)

        if(!formHasError && formIsFilled) {
            setFormIsValid(true)
        } else {
            setFormIsValid(false)
        }

    }, [
        amountError,
        cardNameError,
        amountValue,
        cardNameValue,
    ])

    const onSubmitHandler = () => {
        props.incrementCount()
        props.updateInfo({
            Currency: currencyRef.current.value,
            Amount: amountValue,
            CardName: cardNameValue,
        })
    }
    return (
        <Transition in={props.in} mountOnEnter={false} unmountOnExit timeout={200}>
            {(state) => (
                <div
                    className={`${classes.formContainer}
                     ${state === "exiting" && classes.exiting}
                     ${state === "entering" && classes.entering}
                        `}
                >
                    <Heading1 className={classes.title}>Payment Info</Heading1>
                    <div className={classes.container}>
                        <Select
                            className={classes.shrinkSmall}
                            ref={currencyRef}
                            name="Currency"
                            data={["CAD", "USD", "GBP"]}
                            ></Select>
                        <Input
                            value={amountValue}
                            onBlur={amountOnBlur}
                            onChange={amountOnChange}
                            error={amountError}
                            errorMessage={amountErrorM}
                            touched={amountTouched}
                            name="Amount"
                            ></Input>
                    </div>
                    <div className={classes.container}>
                        <Input
                            value={cardNameValue}
                            onBlur={cardNameOnBlur}
                            onChange={cardNameOnChange}
                            error={cardNameError}
                            errorMessage={cardNameErrorM}
                            touched={cardNameTouched}
                            name="Card Holder Name"
                        ></Input>
                    </div>
                    <div className={classes.cardContainer}>
                        <CardElement options={CARD_OPTIONS}></CardElement>
                    </div>
                    <div className={classes.splitContainer}>
                        <Button onClick={props.decrementCount}>{"<"} Back</Button>
                        {formIsValid ? (
                            <Button onClick={onSubmitHandler}>Next {">"}</Button>
                        ) : (
                            <ButtonDisabled>Next {">"}</ButtonDisabled>
                        )}
                    </div>
                </div>
            )}
        </Transition>
    )
}

export default FormPayment

Answer 1

在对它进行修补之后，它似乎是我的一个 chrome 扩展，在隐身后问题自行解决了。