表单的样式化组件

Question

我将此表单与material-ui组件一起使用。我不想写我当前使用的宽度内联样式，而是选择css-in-js。我以前用过styled component，但我不认为它有一个form元素。

我遇到的唯一一个例子是他们使用了内置样式的组件标签。因为我已经在这些material ui文本字段上实现了验证，所以我不想更改结构。将样式放在css- in -js中的合适方式是什么？如果有样式化组件的解决方案，我会更喜欢。

          return (
            <div className="main-content">
              <form
                style={{ width: '100%' }}
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </form>
            </div>
          );

Answer 1

只需制作带样式的表单：

import styled from 'styled-components';

const Form = styled.form`
   width: 100%;
`;

并使用它：

    return (
            <div className="main-content">
              <Form
                onSubmit={e => {
                  e.preventDefault();
                  submitForm(email);
                }}>
                <div>
                  <TextField
                    variant="outlined"
                    margin="normal"
                    id="email"
                    name="email"
                    helperText={touched.email ? errors.email : ''}
                    error={touched.email && Boolean(errors.email)}
                    label="Email"
                    value={email}
                    onChange={change.bind(null, 'email')}
                  />
                  <CustomButton
                    disabled={!isValid || !email}
                    text={'Remove User'}
                  />
                </div>
              </Form>
            </div>
          );