appleboy/react-recaptcha

Passing style prop

mhemrg opened this issue · 5 comments

mhemrg commented

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

aqibos commented

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.

  • 👍1
glorp47 commented

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

stiofand commented

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 commented

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

enriqueesmith commented

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.