How to give z-index CSS property to the provider?

[AliBahaari]

Hello, as you know there is a GoogleReCaptchaProvider within the package.
In a project, it's needed to apply a z-index CSS property for arranging layers of objects.
I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all.
What's the solution?

[julianshowshappening]

I also wish to do this from my end. I don't believe GoogleReCaptchaProvider has support for styles at the moment but I wish it was integrated.

[alipiry]

Hello, as you know there is a GoogleReCaptchaProvider within the package. In a project, it's needed to apply a z-index CSS property for arranging layers of objects. I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all. What's the solution?

Add these lines of code to your css:

div.grecaptcha-badge {
  z-index: 99999;
}

[AliBahaari]

Hello, as you know there is a GoogleReCaptchaProvider within the package. In a project, it's needed to apply a z-index CSS property for arranging layers of objects. I wrote the code below:

<GoogleReCaptchaProvider reCaptchaKey="..." style={{zIndex: 20000}}>
    <App />
</GoogleReCaptchaProvider>

But nothing happens at all. What's the solution?

Add these lines of code to your css:

div.grecaptcha-badge {
  z-index: 99999;
}

Thanks!