title: Styled Component For Forms
body: <p>I am using this form with material-ui components. Instead of writing the inline style that I am currently using for width, I wanted to opt for css-in-js. I have used styled-components previously but I don't think there's a form element with that.</p>
  
  <p>The only example I came across was one where they had used built-in styled component labels. Since I have implemented validation on these material ui text fields as well so I don't want to change the structure. What would be the suitable way to put the style in css-in-js. I would prefer if there's a solution with styled-components.</p>
  
  <pre><code>          return (
              &lt;div className="main-content"&gt;
                &lt;form
                  style={{ width: '100%' }}
                  onSubmit={e =&gt; {
                    e.preventDefault();
                    submitForm(email);
                  }}&gt;
                  &lt;div&gt;
                    &lt;TextField
                      variant="outlined"
                      margin="normal"
                      id="email"
                      name="email"
                      helperText={touched.email ? errors.email : ''}
                      error={touched.email &amp;&amp; Boolean(errors.email)}
                      label="Email"
                      value={email}
                      onChange={change.bind(null, 'email')}
                    /&gt;
                    &lt;CustomButton
                      disabled={!isValid || !email}
                      text={'Remove User'}
                    /&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            );
  </code></pre>