Стилизованный компонент для форм

Question

Я использую эту форму с компонентами Material-UI. Вместо того, чтобы писать встроенный стиль, который я сейчас использую для ширины, я хотел выбрать css -in- js. Раньше я использовал стилевые компоненты, но я не думаю, что есть элемент формы с этим.

Единственный пример, с которым я столкнулся, - это тот, где они использовали встроенные стилизованные метки компонентов. Так как я применил проверку этих текстовых полей пользовательского интерфейса, я не хочу менять структуру. Каков был бы подходящий способ поместить стиль в css -in- js. Я бы предпочел, если есть решение с Styled-компонентов.

          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>
          );