表单的样式化组件答案

【问题标题】：Styled Component For Forms表单的样式化组件
【发布时间】：2020-07-16 22:54:48
【问题描述】：

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

我遇到的唯一示例是他们使用了内置样式的组件标签。由于我也对这些材料 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>
          );

【问题讨论】：

这能回答你的问题吗？ stackoverflow.com/a/61025884/11872246
const StyledForm = styled.form``;?

标签： javascript css reactjs typescript styled-components

【解决方案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>
          );

【讨论】：