将样式应用于输入字段

Question

我有点困惑如何设置条纹输入元素的样式

这是父类“结算”。

Billing.jsx

....
render() {
        return (
            <div>
                <Elements >
                    <CcCVC />
                </Elements>
                <Elements>
                    <CcExpiryDate />
                </Elements>
                <Elements>
                    <CcNumber />
                </Elements>
            </div>
        )

这是CVC输入字段

CcCVC.jsx

...
render() {
        return (
               ...
                <CardCVCElement
                    classes={
                        {
                            base: 'cc-base',
                            invalid: 'cc-invalid',
                            focus: 'cc-focus',
                        }
                    } />
            ...
        )

我的样式应用于包装div。当填充的输入字段无效时，它将使用我的样式以及此样式.InputElement.is-invalid（直接应用于input，而不是包装div！），使数字变为红色。但是，它不使用默认的StripeElement--invalid样式。但是，我只希望应用我的样式...

我也很困惑如何将字体样式应用于输入字段。可以说，我希望输入的内容为“绿色”。目前，尽管我在cc-base中定义了颜色，但它使用的是条纹的默认颜色样式。