React-stripe-elements: *Element items should accept className property
According to the Stripe.js documentation, it is possible to add a class to the div container for the element to allow styling. Currently this doesn't appear to have any affect on the UI elements.
michael-reeves
All 3 comments
Hi! Because we accept multiple classnames, and add them to the parent node instead of the Element itself, you should use classes, as documented here: https://stripe.com/docs/elements/reference#element-options
For example: <CardElement classes={{base: 'MyBaseInputClass', focus: 'is-focused'}}>
michelle
on 16 May 2017
(Feel free to re-open if that doesn't answer your question.)
michelle
on 16 May 2017
ok, thanks for the example. The Elements reference documentation was not at all clear (it's a bit confusing since it is set up differently from the 'style' section). So, I tried using just classes="form-control" and had no luck. Now I understand why.
The only thing here is, it doesn't feel like the "React" way of doing it. Other modules I've worked with seem to use className to set the classes, so I had an "expectation" that I could use it here. For instance, if I want to override a base class in React-Bootstrap, I can use bsClass on most elements, but if I just want to append my own custom ones and keep the defaults, I can still use className as normal.
However, I do like being able to override the individual classes for validation, focus, etc
michael-reeves
on 16 May 2017
Related issues
cypcz
路
4Comments
drwpow
路
4Comments
mmmikeal
路
4Comments
Thebarda
路
5Comments
sciku1
路
4Comments
Most helpful comment
ok, thanks for the example. The Elements reference documentation was not at all clear (it's a bit confusing since it is set up differently from the 'style' section). So, I tried using just classes="form-control" and had no luck. Now I understand why.
The only thing here is, it doesn't feel like the "React" way of doing it. Other modules I've worked with seem to use className to set the classes, so I had an "expectation" that I could use it here. For instance, if I want to override a base class in React-Bootstrap, I can use bsClass on most elements, but if I just want to append my own custom ones and keep the defaults, I can still use className as normal.
However, I do like being able to override the individual classes for validation, focus, etc