How to make reCaptcha component full width

Question

I'm using reCaptch v2 on my react app. To do that i'm using react-google-recaptcha npm package. Its looks like below atm.

I need that component to take the fullwidth of the form. So how to do that? I tried several options like below, but still no solution. This is my current code

<StyledReCAPTCHA
    sitekey={import.meta.env.VITE_RECAPTCHA_KEY || ""}
    onChange={onRecaptchaChange}
    className="recaptcha-container"
  />

    export const StyledReCAPTCHA = styled(ReCAPTCHA)(({ theme }) => ({
  width: '100%',
  marginBottom: 16,
  
  // Target the exact structure from the HTML
  '& > div': {
    width: '100% !important',
    '& > div': {
      width: '100% !important',
      '& > div[style*="width: 304px; height: 78px"]': {
        width: '100% !important',
        height: '78px !important',
        '& > div': {
          width: '100% !important',
          '& > iframe[title="reCAPTCHA"][width="304"][height="78"]': {
            width: '100% !important',
            height: '78px !important',
          }
        }
      },
      '& > textarea#g-recaptcha-response': {
        width: '100% !important',
        margin: '10px 0 !important',
      }
    }
  },
  
  // Additional fallback selectors
  '& div[style*="304px"]': {
    width: '100% !important',
  },
  '& iframe[width="304"]': {
    width: '100% !important',
  },
  '& textarea[style*="250px"]': {
    width: '100% !important',
    margin: '10px 0 !important',
  },
  
  // CSS custom properties approach
  '& *': {
    '--recaptcha-width': '100% !important',
  }
}));

premod suraweera · Accepted Answer · 2025-07-19 15:26:57Z

2


const StyledReCAPTCHAWrapper = styled('div')({
  width: '100%',
  display: 'flex',
  justifyContent: 'center', // center reCAPTCHA
  marginBottom: 16,
});

<StyledReCAPTCHAWrapper>
  <ReCAPTCHA
    sitekey={import.meta.env.VITE_RECAPTCHA_KEY || ''}
    onChange={onRecaptchaChange}
  />
</StyledReCAPTCHAWrapper>

The standard and safe workaround is to center the reCAPTCHA in your form and make it feel integrated.

Centering with a wrapper div

answered Jul 19 at 15:26

premod suraweera

693 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make reCaptcha component full width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related