reactjs - 如何自定义 React Recaptcha 的样式？

Question

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

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

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

这是我的代码

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

但这不起作用。

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

任何帮助，将不胜感激。

标签： reactjsmaterial-uirecaptcha

Answer 1

我认为你的风格定位有问题，试试这样：

"& > div > image"

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

编辑

上传照片后：看看这个