Passing style prop

[mhemrg]

Can I pass style prop to <Recaptcha />? I want to give it margin: auto.

[aqibos]

If it helps, I wrapped it in a <div></div> block and styled the div block.

But, I also would like to know if it can be styled in any way.

Thanks.

[glorp47]

+1 ... the fact that the styling is inline hardcoded would be fine if there was some way to change the default style...

[stiofand]

At present for some nonsensical reason, with all their hullabaloo about material-ui and responsive design, the recaptcha is entirely un responsive, since its called in an iFrame, there is no way to style the final element. I so badly need to adjust the width for smaller screen sizes, but styling an outer custom element does not trickle through an iFrame, so its a serious flaw on Googles side.

[selrond]

@stevematdavies @ashah023 @glorp47 this helps, if you're dealing with small screens: ReCaptcha API v2 Styling - Stack Overflow

[enriqueesmith]

I was able to adjust the size of the Recaptcha by passing an elementId prop in the Recaptcha component and then calling the id in the css file:

In JSX file:

... <Recaptcha elementID="tablet" sitekey="6Le_my_site_key" render="explicit" /> ...

In CSS file:

#tablet {
	transform:scale(0.70);
	-webkit-transform:scale(0.70);
	transform-origin:0 0;
	-webkit-transform-origin:0 0;
}

Just change the scale numbers accordingly and it should make the Recaptcha box smaller or larger depending on what you want.