How to customize style of React Recaptcha?

Question

I am using this package in my React application.

The problem is when running the application in a specific device Galaxy Fold, the container of selecting images is too big.

I need to change the size of the div with this id rc-imageselect.

Here is my code

        <div className={classes.recapt} style={{ transform: 'scale(0.8, 0.8) translateX(10%)', display: "table" }}>
          <Recaptcha
            expiredCallback={() => setCaptchaCode(false)}
            sitekey={localStorage.getItem("CAPTCHA_KEY")}
            render="explicit"
            onloadCallback={callback}
            verifyCallback={verifyCallback}
          />
        </div>

   export default makeStyles((theme) => ({
    recapt: {
      "&div": {
        "&#rc-imageselect": {
            transform: 'scale(0.8, 0.8) translateX(10%)'
        }
       }
    }
   }));

But this doesn't work.

I changed it in te inspect panel and it works. So my guess I am selection the div in a wrong way.

Any help would be appreciated.

b3hr4d · Answer 1 · 2020-12-24T14:49:45.027

0

I think your style targeting has problem, try like this :

"& > div > image"

And i think u cannot using query (#elementID) on that .

Edit

After uploading photo : Take look at this

edited Dec 24 '20 at 14:49

answered Dec 24 '20 at 14:34

b3hr4d

2,025
3
16

that's not working. Please notice that the target should 'rc-imageselect' which is an id not a class – Amine Dec 24 '20 at 14:40
@Amine can u make screen shot from element u want target? – b3hr4d Dec 24 '20 at 14:41
I uploaded it . – Amine Dec 24 '20 at 14:43
@Amine u cannot target id or class on this, u should target element by tagname – b3hr4d Dec 24 '20 at 14:43
The tag name is div – Amine Dec 24 '20 at 14:44
So it can't be styled ? – Amine Dec 24 '20 at 14:53
in your case u should try this answer https://stackoverflow.com/a/30376755/12608714 maybe it works. good luck. – b3hr4d Dec 24 '20 at 14:55
Thank you I am already implementing this as it affects only the initial container – Amine Dec 24 '20 at 14:58

How to customize style of React Recaptcha?

1 Answers1