credit card style issue

Question

I am trying to change the border color of credit card input, yet it is not working

Here is documentation for creditcardinput. Here is a demo where green custom border color is applied. Here is hosted on codesandbox

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

Answer 1

You need to use the fieldStyle or containerStyle prop instead of the style prop. Using either seems to produce the same results at least in the codesandbox example you've shared, though there may be differences between the two as your code changes.

From the available props documentation :

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

Example:

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