信用卡样式问题

【问题标题】：credit card style issue信用卡样式问题
【发布时间】：2019-05-21 16:43:07
【问题描述】：

我正在尝试更改信用卡输入的边框颜色，但它不起作用

这里是documentation 用于信用卡输入。这是一个demo，其中应用了绿色自定义边框颜色。这里托管在codesandbox

  <CreditCardInput
    cardNumberInputProps={{  }}
    cardExpiryInputProps={{  }}
    cardCVCInputProps={{  }}
    style={ { border: '2px solid yellow' } }
 />

【问题讨论】：

style 不是受支持的道具。也许containerStyle 可以工作。我建议你阅读文档。

标签： javascript reactjs styles

【解决方案1】：

您需要使用 fieldStyle 或 containerStyle 属性而不是 style 属性。至少在您共享的代码框示例中，使用其中任何一个似乎都会产生相同的结果，尽管随着代码的更改，两者之间可能会有所不同。

来自available props documentation：

containerStyle |  object (optional)  |  {}  |  Style for the field container
fieldStyle     |  object (optional)  |  {}  |  Style for the field

例子：

function App() {
  return (
    <div className="App">
      <CreditCardInput
        cardNumberInputProps={{  }}
        cardExpiryInputProps={{  }}
        cardCVCInputProps={{  }}
        fieldStyle={ { border: '2px solid yellow' } }
/>

【讨论】：