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 </Button> </form>

[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 }) => (

    <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
      </Button>
    </form>
    {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
    {status === "error" && <div style={{ color: "red" }} dangerouslySetInnerHTML={{__html: message}}/>}
    {status === "success" && <div style={{ color: "green" }}>Subscribed !</div>}
  </div>
)}
/> 

`
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