Change the base color font from stripe CardNumberElement on Material UI

user_7274976 0
Viewed 662

I'm personalizing the react stripe elements provided by Stripe, but I can't change the font color, the background is working and other styles, but the font color stays on black.

This is my stripe element:

<Grid item md={6}>
  <TextField
    variant="outlined"
    size="small"
    required
    fullWidth
    className={classes.inputStyle}
    InputProps={{
      inputComponent: StripeInput,
      inputProps: {
        component: CardCvcElement
      },
      className: classes.multilineColor
    }}
    />
 </Grid>

It's styles:

inputFields: {
  borderRadius: theme.spacing(1),
  backgroundColor: '#000000',
  color: '#FFF'
},
multilineColor: {
  color: '#FFFFFF'
},

The StripeInput component is this:

function StripeInput ({ component: Component, inputRef, ...props }) {
  const elementRef = useRef();
  useImperativeHandle(inputRef, () => ({
    focus: () => elementRef.current.focus
  }));

  return (
    <Component
      onReady={element => (elementRef.current = element)}
      style={{
        base: {
          color: 'green' // The desired result is white, for the example I'm using green but no changes
        }
      }}
      {...props}/>
  )
}

export default StripeInput;

The normal text should be displayed with green or white color for example but this is the result:

enter image description here

The text always is displayed black

stripe-payments material-ui reactjs
1 Answers

So I just fixed my issue with the font color, the fix was to add the styles to the Stripe Input component like this:

function StripeInput ({ component: Component, inputRef, ...props }) {
  const elementRef = useRef();
  useImperativeHandle(inputRef, () => ({
    focus: () => elementRef.current.focus
  }));

  return (
    <Component
      onReady={element => (elementRef.current = element)}
      options={{
        style: {
          base: {
            color: '#FFF'
          }
        }
      }}
      {...props}/>
  )
}

export default StripeInput;
user_72749760
Related