如何自定义 React Recaptcha 的样式？

Question

我在我的React 应用程序中使用this 包。

问题是在特定设备Galaxy Fold上运行应用时，选择图片的容器太大了。

我需要用这个 id rc-imageselect 更改 div 的大小。

这是我的代码

        <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%)'
        }
       }
    }
   }));

但这不起作用。

我在检查面板中对其进行了更改，并且可以正常工作。所以我猜我选择 div 的方式有误。

任何帮助将不胜感激。

Answer 1

我觉得你的风格定位有问题，试试这样：

"& > div > image"

我认为你不能在上面使用查询（#elementID）。

编辑

上传照片后：看看this