How do I apply styling

[nirajupadhyay11]

How do I apply material-ui styling to

<MailchimpSubscribe url={url}/>

I am only using email for subscription and my form is as follows

`<form onSubmit={formData => subscribe(formData)}> <TextField variant="outlined" margin="normal" required type="email" fullWidth id="email" label="Email Address" name="EMAIL" autoComplete="email" autoFocus onChange={e => setEmail(e.target.value)} /> <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit}

Subscribe `

[revolunet]

what is your problem exactly ?

[nirajupadhyay11]

I am creating the app using reactjs and material-ui. Since I am trying to use only email to subscribe to mailchimp, I wanted to use <MailchimpSubscribe url={url}/> to do so.

But, I also want the email field on my page to look like the attached screenshot

So, here is how I used your component to do so

`<MailchimpSubscribe url={mailchimpurl} render={({ subscribe, status, message }) => (

subscribe(formData)}> setEmail(e.target.value)} /> Subscribe {status === "sending" &&

sending...

} {status === "error" &&

} {status === "success" &&

Subscribed !

}

)}
/> 

` but, when I submit the form with email address in this case, the URL of the page gets changed to something like following - http://localhost:3000/?EMAIL=abc%40test.com and the entire page gets refreshed. Also, the email does not get subscribed to the list.

[revolunet]

Is it possible for you to create a codesandbox.io example ? will be easier to debug

[jamieweavis]

You're passing an event directly into the subscribe function @nirajupadhyay11 - when building your own form you need to prevent the default form post and then call subscribe with your own emailAddress variable, like this:

<form
  onSubmit={(event) => {
    event.preventDefault();
    subscribe({ EMAIL: emailAddress });
  }}
>

[roro9999]

Thank you